@sheinoutmobile/shineoutmobile 1.8.2

package/test/cases/case-drawer01.source.jsx

@@ -0,0 +1,85 @@
+/**
+ * 测试用例
+ *
+ * @title Drawer
+ * @desc
+ *   抽屉
+ */
+
+import React from 'react';
+import { Drawer, Button } from '../../src/index';
+
+// doc
+const style = { marginRight: 16 };
+class UseDrawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      bVisible: false,
+      rVisible: false,
+      frVisible: false,
+      fbVisible: false,
+      secondVisible: false,
+    };
+  }
+
+  render() {
+    const { bVisible, rVisible, frVisible, fbVisible, secondVisible } = this.state;
+    return (
+      <div>
+        <a onClick={() => this.setState({ bVisible: true })} style={style}>open bottom drawer</a>
+        <Drawer
+          visible={bVisible}
+          onClose={() => this.setState({ bVisible: false })}
+          position="bottom"
+          height={200}
+        >
+          来来我是一颗菠菜
+        </Drawer>
+        <a onClick={() => this.setState({ rVisible: true })} style={style}>open right drawer</a>
+        <Drawer
+          visible={rVisible}
+          onClose={() => this.setState({ rVisible: false })}
+          position="right"
+          width={300}
+        >
+          <div style={{ height: 800 }}>来来我是一颗菠菜</div>
+        </Drawer>
+        <a onClick={() => this.setState({ frVisible: true })} style={style}>open right 80%-width drawer</a>
+        <Drawer
+          visible={frVisible}
+          onClose={() => this.setState({ frVisible: false })}
+          position="right"
+          width="80%"
+        >
+          <div style={{ height: '100%' }}>
+            <div style={{ height: 'calc(100% + 200px)' }}>
+            我这颗菠菜填满整个屏幕的80%哦！
+            </div>
+          </div>
+        </Drawer>
+        <a onClick={() => this.setState({ fbVisible: true })} style={style}>open bottom 100%-height drawer</a>
+        <Drawer
+          visible={fbVisible}
+          onClose={() => this.setState({ fbVisible: false })}
+          position="bottom"
+          height="100%"
+        >
+          我这颗菠菜从下往上填满整个屏幕哦！
+          <Button type="danger" onClick={() => this.setState({ fbVisible: false })}>关闭</Button>
+          <br/>
+          <Button onClick={() => this.setState({ secondVisible: true })}>再来一层</Button>
+        </Drawer>
+        <Drawer
+          visible={secondVisible}
+          zIndex={100}
+          onClose={() => this.setState({ secondVisible: false })}
+        >
+          第二层GOGOGO
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+export default <UseDrawer />

package/test/cases/case-icons01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World')
+}

package/test/cases/case-icons01.source.jsx

@@ -0,0 +1,25 @@
+/**
+ * 测试用例
+ *
+ * @title Icons
+ * @desc
+ *   没有传任何参数。
+ */
+
+import React from 'react'
+import { Icons } from '../../src/index';
+
+// doc
+const style = { marginRight: 12 };
+export default (
+  <div>
+    <Icons name="inform" style={style} />
+    <Icons name="fail" style={style} />
+    <Icons name="success" style={Object.assign({}, style, { color: 'green' })} />
+    <Icons name="close" style={style} />
+    <Icons name="remark" style={style} />
+    <Icons name="photo" style={style} />
+    <Icons name="add1" style={style} />
+    <Icons name="search" style={Object.assign({}, style, { color: 'blue', fontSize: '18px' })} />
+  </div>
+)

package/test/cases/case-indexSortList01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World')
+}

package/test/cases/case-indexSortList01.source.jsx

@@ -0,0 +1,74 @@
+/**
+ * 测试用例
+ *
+ * @title IndexSortList - 索引列表
+ * @desc
+ *   没有传任何参数。
+ */
+
+import React from 'react'
+import { IndexSortList } from '../../src/index'
+
+// doc
+const data = [
+  {
+    title: 'A',
+    data: [{ label: '阿布', value: 'a1' }, { label: '阿波罗', value: 'a2' }, { label: '奥林匹克', value: 'a3' }],
+  },
+  {
+    title: 'C',
+    data: [{ label: '测量', value: 'c1' }, { label: '瓷器', value: 'c2' }, { label: '搓麻将', value: 'c3' }],
+  },
+  {
+    title: 'F',
+    data: [{ label: '方法', value: 'f1' }, { label: '夫妇', value: 'f2' }, { label: '飞飞飞', value: 'f3' }],
+  },
+  {
+    title: 'Z',
+    data: [{ label: '折扣', value: 'z1' }, { label: '地面', value: 'z2' }, { label: '这个天', value: 'z3' }],
+  },
+];
+
+const sortData = [
+  { label: '嗷嗷', value: 'a1' }, { label: '暗暗', value: 'a2' }, { label: '啊啊', value: 'a3' },
+  { label: '天天', value: 'c1' }, { label: '头疼', value: 'c2' }, { label: '太挑剔', value: 'c3' },
+  { label: '这种', value: 'z1' }, { label: '组织', value: 'z2' }, { label: '自治州', value: 'z3' },
+  { label: '订单', value: 'd1' }, { label: '达到', value: 'd2' }, { label: '得到的', value: 'd3' },
+  { label: 'FBA', value: 'f1' }, { label: '$%乱码', value: 'f2' }, { label: '123加工厂', value: 'f3' },
+];
+
+const sortData2 = [
+  { label: '111', value: '111' }, { label: '1111', value: '1111' }, { label: '11111', value: '11111' },
+  { label: '222', value: '222' }, { label: '333', value: '333' }, { label: '3333', value: '3333' },
+];
+
+export default (
+  <div>
+    <p>第一种用法：按规则传入数据</p>
+    <div style={{ height: 200 }}>
+      <IndexSortList
+        data={data}
+        select={(value, label) => console.log(`点击的是：${label},value是${value}`)}
+      />
+    </div>
+    <br />
+    <p>第二种用法是索引组件会帮你进行排序</p>
+    <div style={{ height: 200 }}>
+      <IndexSortList
+        rule="pinyin"
+        data={sortData}
+        select={(value, label) => console.log(`点击的是：${label},value是${value}`)}
+      />
+    </div>
+    <p>同样是第二种用法，sort传入自定义方法来自定义排序规则</p>
+    <div style={{ height: 200 }}>
+      <IndexSortList
+        empty="木有东西哦～"
+        rule={item => item.label[0]} // 自定义排序规则
+        data={sortData2}
+        select={(value, label) => console.log(`点击的是：${label},value是${value}`)}
+        render={(item) => (<div><i>♬</i><text>{item.label}</text></div>)}
+      />
+    </div>
+  </div>
+)

package/test/cases/case-input01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World')
+}

package/test/cases/case-input01.source.jsx

@@ -0,0 +1,24 @@
+/**
+ * 测试用例
+ *
+ * @title Input
+ * @desc
+ *   没有传任何参数。
+ */
+
+import React from 'react'
+import { Button, Input } from '../../src/index'
+
+// doc
+export default (
+  <div>
+    <Input border type="number" placeholder="请输入" style={{ marginBottom: 12 }} />
+    <Input
+      type="textarea"
+      border
+      rows={4}
+      placeholder="请写明你反馈该厂飞单的情况，能截图活拍照举证效果更好，你的举证是SHEIN推进“制定采购”的有力支持。 如有布料采购不足，请填写实际出料米数。"
+      placeholderStyle="light"
+    />
+  </div>
+)

package/test/cases/case-listView01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World')
+}

package/test/cases/case-listView01.source.jsx

@@ -0,0 +1,64 @@
+/**
+ * 测试用例
+ *
+ * @title List-View
+ * @desc
+ *   没有传任何参数。
+ */
+
+import React from 'react'
+import { Button, ListView } from '../../src/index'
+
+// doc
+const getList = () =>  new Promise((resolve) => {
+  setTimeout(() => resolve([1, 2, 3, 4, 5]), 1.5 * 1000);
+});
+
+const style = {
+  height: 120,
+  border: '1px solid #969799',
+  borderRadius: '8px',
+  margin: '8px'
+};
+
+class List extends React.Component{
+  constructor(props) {
+    super(props);
+    this.state = {
+      list: [],
+      loading: false,
+    };
+  }
+  render() {
+    const { list, loading } = this.state;
+    return (
+      <div style={{ height: 200 }}>
+        <ListView
+          loading={loading}
+          onRefresh={() => console.log('下拉刷新')}
+          onTouchBottom={() => {
+            console.log('触底了喂');
+            this.setState({ loading: true });
+            getList().then(data => this.setState({ list: [...list, ...data], loading: false }))
+          }}
+        >
+          {
+            list.map(l => <div style={style}>我是{l}<br />我是地址<br />我是电话</div>)
+          }
+        </ListView>
+        <Button
+          type="primary"
+          size="small"
+          onClick={() => {
+            this.setState({ loading: true });
+            getList().then(data => this.setState({ list: [...list, ...data], loading: false }))
+          }}
+        >
+          拿数据
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default <List />

package/test/cases/case-multiplePicker01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World');
+}

package/test/cases/case-multiplePicker01.source.jsx

@@ -0,0 +1,60 @@
+/**
+ * 测试用例
+ *
+ * @title MultiplePicker
+ * @desc
+ *   多重选择器
+ */
+
+import React from 'react';
+import { SlideList } from '../../src/index';
+
+const { PickerItem } = SlideList;
+
+const testData = [
+  { value: 'BJ', label: '北京' },
+  { value: 'SH', label: '上海' },
+  { value: 'GZ', label: '广州' },
+  { value: 'SZ', label: '深圳' },
+  { value: 'HZ', label: '杭州' },
+  { value: 'NJ', label: '南京' },
+  { value: 'WH', label: '武汉' },
+  { value: 'JN', label: '济南' },
+];
+
+// doc
+class UseMultiplePicker extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      pickerValue2: '',
+      pickerValue1: '',
+    };
+  }
+
+  render() {
+    const { pickerValue1, pickerValue2 } = this.state;
+    return (
+      <div style={{ display: 'flex', height: 200 }}>
+        <div style={{ width: 300 }}>
+          <SlideList
+            value={pickerValue1}
+            onValueChange={value => this.setState({ pickerValue1: value })}
+          >
+            {testData.map(item => (<PickerItem key={item.value} value={item.value}>{item.label}</PickerItem>))}
+          </SlideList>
+        </div>
+        <div style={{ width: 300 }}>
+          <SlideList
+            value={pickerValue2}
+            onValueChange={value => this.setState({ pickerValue2: value })}
+          >
+            {testData.map(item => (<PickerItem key={item.value} value={item.value}>{item.label}</PickerItem>))}
+          </SlideList>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default <UseMultiplePicker />;

package/test/cases/case-multipleSelector01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World');
+}

package/test/cases/case-multipleSelector01.source.jsx

@@ -0,0 +1,49 @@
+/**
+ * 测试用例
+ *
+ * @title MultipleSelector
+ * @desc
+ *   批量选择器
+ */
+
+import React from 'react';
+import { MultipleSelector } from '../../src/index';
+
+// doc
+const option = [
+  { label: '学习小组', name: 'study', data: [{ label: '学习达人', value: 11 }, { label: '学习白痴', value: 12 }] },
+  { label: '兴趣小组', name: 'interesting', data: [{ label: '兴趣达人', value: 21 }] },
+  { label: '工作小组', name: 'work', data: [{ label: '工作达人', value: 31 }, { label: '工作咸鱼', value: 32 }, { label: '红枣枸杞工作者', value: 33 }] },
+  { label: '发狂小组', name: 'crazy', data: [{ label: '废青', value: 41 }] },
+  { label: '扭捏小组', name: 'shy', data: [{ label: '黄花大姑娘', value: 41 }] },
+  { label: '文艺小组', name: 'art', data: [{ label: '秃头艺术家', value: 61 }] },
+  { label: '天使小组', name: 'angel', data: [] },
+];
+
+class UseSelector extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  render() {
+    const { visible } = this.state;
+    return (
+      <div>
+        <a onClick={() => this.setState({ visible: true })}>open bottom selector</a>
+        <MultipleSelector
+          visible={visible}
+          onClose={() => this.setState({ visible: false })}
+          onChange={value => console.log(value)}
+          option={option}
+          title="这是一个标题"
+          extraComponent={(<div style={{ lineHeight: '45px', textAlign: 'center' }}>这是一个额外的操作空间哦～</div>)}
+        />
+      </div>
+    );
+  }
+}
+
+export default <UseSelector />

package/test/cases/case-noticebar01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World')
+}

package/test/cases/case-noticebar01.source.jsx

@@ -0,0 +1,21 @@
+/**
+ * 测试用例
+ *
+ * @title NoticeBar-滚动公告
+ * @desc
+ *   没有传任何参数。
+ */
+
+import React from 'react';
+import { NoticeBar } from '../../src/index';
+
+const text = '为什么香港对中国大陆的认同感没那么强, 为什么有那么多香港人迷之自信讨厌中国? .... 香港有多少人知道98年索罗斯财团入侵香港事件的，他们怎么看这件事？';
+const text2 = '香港有多少人知道98年索罗斯财团入侵香港事件的，他们怎么看这件事？';
+
+// doc
+export default (
+  <div>
+    <NoticeBar text={text} icon="next" style={{ marginBottom: 12 }} />
+    <NoticeBar text={text2} icon speed={100} style={{ color: '#f44', background: '#e5e5e5' }} />
+  </div>
+);

package/test/cases/case-picker01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World');
+}

package/test/cases/case-picker01.source.jsx

@@ -0,0 +1,61 @@
+/**
+ * 测试用例
+ *
+ * @title Picker
+ * @desc
+ *   选择器
+ */
+
+import React from 'react';
+import { Picker } from '../../src/index';
+
+const blankData = [];
+
+const testData = [
+  { value: 'BJ', label: '北京' },
+  { value: 'SH', label: '上海' },
+  { value: 'GZ', label: '广州' },
+  { value: 'SZ', label: '深圳' },
+  { value: 'HZ', label: '杭州' },
+  { value: 'NJ', label: '南京' },
+  { value: 'WH', label: '武汉' },
+  { value: 'JN', label: '济南' },
+];
+
+// doc
+class UsePicker extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      bVisible: false,
+    };
+
+    this.onPickerConfirm = this.onPickerConfirm.bind(this);
+  }
+
+  onPickerConfirm(value) {
+    console.log(value);
+    this.setState({ bVisible: false });
+  }
+
+  render() {
+    const { bVisible } = this.state;
+    return (
+      <div>
+        <a onClick={() => this.setState({ bVisible: true })} style={{ marginRight: 16 }}>open bottom picker</a>
+        <Picker
+          visible={bVisible}
+          onCancel={() => this.setState({ bVisible: false })}
+          position="bottom"
+          data={bVisible ? testData : blankData}
+          height={400}
+          title="选择城市"
+          defaultValue="12345"
+          onConfirm={this.onPickerConfirm}
+        />
+      </div>
+    );
+  }
+}
+
+export default <UsePicker />;

package/test/cases/case-refresh01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World')
+}

package/test/cases/case-refresh01.source.jsx

@@ -0,0 +1,33 @@
+/**
+ * 测试用例
+ *
+ * @title pull-refresh
+ * @desc
+ *   包住节点即可
+ */
+
+import React from 'react';
+import { PullRefresh } from '../../src/index';
+
+// doc
+class Test extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0,
+    };
+  }
+
+  render() {
+    const { count } = this.state;
+    return (
+      <PullRefresh
+        refresh={() => this.setState({ count: count + 1 })}
+      >
+        <div>{`刷了${count}次`}</div>
+      </PullRefresh>
+    );
+  }
+}
+
+export default <Test />;

package/test/cases/case-sign01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World');
+}

package/test/cases/case-sign01.source.jsx

@@ -0,0 +1,21 @@
+/**
+ * 测试用例
+ *
+ * @title Sign-标签
+ * @desc
+ *   color有7种颜色：'green', 'red', 'blue', 'purple', 'fuchsia', 'yellow'
+ *   size有default和large
+ */
+
+import React from 'react';
+import { Sign } from '../../src/index';
+
+const style = { marginRight: 8 };
+// doc
+export default (
+  <div>
+    <Sign color="blue" text="蓝天" style={style} />
+    <Sign color="red" text="紧急" style={style} />
+    <Sign plain color="yellow" text="黄？" />
+  </div>
+);

package/test/cases/case-subscript01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World');
+}

package/test/cases/case-subscript01.source.jsx

@@ -0,0 +1,30 @@
+/**
+ * 测试用例
+ *
+ * @title Subscript-角标
+ * @desc
+ *   没有传任何参数。
+ */
+
+import React from 'react'
+import { Subscript } from '../../src/index'
+
+// doc
+const style = {
+  position: 'relative',
+  width: '120px',
+  height: '100px',
+  border: '1px solid #d9d9d9',
+  borderRadius: '8px',
+};
+
+export default (
+  <div>
+    <div style={style}>
+      <Subscript color="red" text="另类" />
+    </div>
+    <div style={style}>
+      <Subscript color="blue" text="正常" />
+    </div>
+  </div>
+)

package/test/cases/case-tab01.assert.js

@@ -0,0 +1,6 @@
+/**
+ * assertions
+ */
+export default (assert, element) => {
+  assert.equal(element.text(), 'Hello World');
+}