|
@@ -5,21 +5,28 @@ import CheckBox from '../basic/CheckBox'
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function Component(props: { items: any[], title?: string, type?: TimelineType }) {
|
|
export default function Component(props: { items: any[], title?: string, type?: TimelineType }) {
|
|
|
|
|
+
|
|
|
|
|
+ /*
|
|
|
|
|
+ <View style={{ background: 'red', width: 30, height: 30 }}>
|
|
|
|
|
+
|
|
|
|
|
+ <mysvg src='' colors={['gray']} />
|
|
|
|
|
+ </View>
|
|
|
|
|
+ */
|
|
|
function paddingIcon() {
|
|
function paddingIcon() {
|
|
|
- return `<svg t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200">
|
|
|
|
|
- <path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548">
|
|
|
|
|
- </path></svg>`
|
|
|
|
|
|
|
+ return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g><ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="#FFFFFF" fill="none" stroke-width="1"/></g></g></svg>`
|
|
|
}
|
|
}
|
|
|
- function checkIcon() {
|
|
|
|
|
- return `<svg t="1701751531639" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686" width="200" height="200">
|
|
|
|
|
- <path d="M682.928 402.992l11.312 11.328a16 16 0 0 1 0 22.624L484.96 646.24a16 16 0 0 1-22.624 0l-99.008-98.992a16 16 0 0 1 0-22.624l11.312-11.328a16 16 0 0 1 22.624 0l76.384 76.384 186.672-186.688a16 16 0 0 1 22.624 0zM512 800c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z" fill="#000000" p-id="3687">
|
|
|
|
|
- </path></svg>`
|
|
|
|
|
|
|
+ function checkIcon(color) {
|
|
|
|
|
+ return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs>
|
|
|
|
|
+ <clipPath id="master_svg0_1288_09724"><rect x="2" y="2" width="12" height="12" rx="0"/></clipPath></defs><g><g>
|
|
|
|
|
+ <ellipse cx="8" cy="8" rx="8" ry="8" fill="${color}" fill-opacity="0.4000000059604645"/>
|
|
|
|
|
+ <ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="${color}" fill="none" stroke-width="1"/></g>
|
|
|
|
|
+ <g clip-path="url(#master_svg0_1288_09724)"><g><path d="M12.35355,4.646446C12.5488,4.841709,12.5488,5.15829,12.35355,5.353555C12.35355,5.353555,6.85355,10.85355,6.85355,10.85355C6.65829,11.0488,6.34171,11.0488,6.14645,10.85355C6.14645,10.85355,3.646446,8.35355,3.646446,8.35355C3.4511845,8.158290000000001,3.4511845,7.84171,3.646446,7.64645C3.841709,7.45118,4.15829,7.45118,4.353555,7.64645C4.353555,7.64645,6.5,9.7929,6.5,9.7929C6.5,9.7929,11.64645,4.646446,11.64645,4.646446C11.8417,4.4511845,12.1583,4.4511845,12.35355,4.646446C12.35355,4.646446,12.35355,4.646446,12.35355,4.646446Z" fill-rule="evenodd" fill="${color}" fill-opacity="1"/></g></g></g></svg>`
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function cancelIcon() {
|
|
|
|
|
- return `<svg t="1701751580527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3825" width="200" height="200">
|
|
|
|
|
- <path d="M553.936 504l79.2 79.2a16 16 0 0 1 0 22.624l-11.312 11.312a16 16 0 0 1-22.624 0l-79.2-79.2-79.2 79.2a16 16 0 0 1-22.624 0l-11.312-11.312a16 16 0 0 1 0-22.624l79.2-79.2-79.2-79.2a16 16 0 0 1 0-22.624l11.312-11.312a16 16 0 0 1 22.624 0l79.2 79.2 79.2-79.2a16 16 0 0 1 22.624 0l11.312 11.312a16 16 0 0 1 0 22.624l-79.2 79.2zM512 800c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z" fill="#000000" p-id="3826">
|
|
|
|
|
- </path></svg>`
|
|
|
|
|
|
|
+ function cancelIcon(color) {
|
|
|
|
|
+ return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs>
|
|
|
|
|
+ <clipPath id="master_svg0_1288_09725"><rect x="2" y="2" width="12" height="12" rx="0"/></clipPath></defs><g><g><ellipse cx="8" cy="8" rx="8" ry="8" fill="${color}" fill-opacity="0.4000000059604645"/>
|
|
|
|
|
+ <ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="${color}" fill="none" stroke-width="1"/></g><g clip-path="url(#master_svg0_1288_09725)"><g><path d="M4.646446,4.646446C4.841709,4.4511845,5.15829,4.4511845,5.353555,4.646446C5.353555,4.646446,8,7.2928999999999995,8,7.2928999999999995C8,7.2928999999999995,10.64645,4.646446,10.64645,4.646446C10.8417,4.4511845,11.1583,4.4511845,11.35355,4.646446C11.5488,4.841709,11.5488,5.15829,11.35355,5.353555C11.35355,5.353555,8.70711,8,8.70711,8C8.70711,8,11.35355,10.64645,11.35355,10.64645C11.5488,10.8417,11.5488,11.1583,11.35355,11.35355C11.1583,11.5488,10.8417,11.5488,10.64645,11.35355C10.64645,11.35355,8,8.70711,8,8.70711C8,8.70711,5.353555,11.35355,5.353555,11.35355C5.15829,11.5488,4.841709,11.5488,4.646446,11.35355C4.4511845,11.1583,4.4511845,10.8417,4.646446,10.64645C4.646446,10.64645,7.2928999999999995,8,7.2928999999999995,8C7.2928999999999995,8,4.646446,5.353555,4.646446,5.353555C4.4511845,5.15829,4.4511845,4.841709,4.646446,4.646446C4.646446,4.646446,4.646446,4.646446,4.646446,4.646446Z" fill-rule="evenodd" fill="${color}" fill-opacity="1"/></g></g></g></svg>`
|
|
|
}
|
|
}
|
|
|
return <View className="timeline">
|
|
return <View className="timeline">
|
|
|
{
|
|
{
|
|
@@ -31,13 +38,25 @@ export default function Component(props: { items: any[], title?: string, type?:
|
|
|
<View className='timelineItem'>
|
|
<View className='timelineItem'>
|
|
|
<View className='timelineContentView'>
|
|
<View className='timelineContentView'>
|
|
|
{
|
|
{
|
|
|
- item.status == 'padding' && <Icon type='circle' size='16' color='#ffffff66' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
|
|
|
|
|
|
|
+ item.status == 'padding' && <View style={{ width: 16, height: 16 }}>
|
|
|
|
|
+
|
|
|
|
|
+ <mysvg src={paddingIcon()} colors={['#ffffff66']} />
|
|
|
|
|
+ </View>
|
|
|
|
|
+ //<Icon type='circle' size='16' color='#ffffff66' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
|
|
|
}
|
|
}
|
|
|
{
|
|
{
|
|
|
- item.status == 'done' && <Icon type='success' color={item.color} size='16' />//<CheckBox type={CheckBoxType.check} opacity={0.4} color={item.color}/>
|
|
|
|
|
|
|
+ item.status == 'done' && <View style={{ width: 16, height: 16 }}>
|
|
|
|
|
+
|
|
|
|
|
+ <mysvg src={checkIcon(item.color)} />
|
|
|
|
|
+ </View>
|
|
|
|
|
+ //<Icon type='success' color={item.color} size='16' />//<CheckBox type={CheckBoxType.check} opacity={0.4} color={item.color}/>
|
|
|
}
|
|
}
|
|
|
{
|
|
{
|
|
|
- item.status == 'un_done' && <Icon type='cancel' color={item.color} size='16' />//<CheckBox type={CheckBoxType.cross} opacity={0.4} color={item.color}/>
|
|
|
|
|
|
|
+ item.status == 'un_done' && <View style={{ width: 16, height: 16 }}>
|
|
|
|
|
+
|
|
|
|
|
+ <mysvg src={cancelIcon(item.color)} />
|
|
|
|
|
+ </View>
|
|
|
|
|
+ //<Icon type='cancel' color={item.color} size='16' />//<CheckBox type={CheckBoxType.cross} opacity={0.4} color={item.color}/>
|
|
|
}
|
|
}
|
|
|
<View className='timelineContentDetail'>
|
|
<View className='timelineContentDetail'>
|
|
|
<View className="timeline-time" style={{ color: item.color ? item.color : '#fff' }}>{item.title}</View>
|
|
<View className="timeline-time" style={{ color: item.color ? item.color : '#fff' }}>{item.title}</View>
|