@sheinoutmobile/shineoutmobile 1.8.2

package/src/component/sign/sign.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+
+import mergeClassName from '../../tools/merge-class-name';
+
+const Sign = (args) => {
+  const { plain, text, className, color, ...other } = args;
+  const plainText = plain ? 'plain' : 'default';
+  return (
+    <span
+      {...other}
+      className={mergeClassName([className, styles[`sign-${plainText}`], styles[`sign-${plainText}-${color}`]])}
+    >
+      {text}
+    </span>
+  );
+};
+
+Sign.propTypes = {
+  text: PropTypes.node,
+  // size: PropTypes.oneOfType(['default', 'large']),
+  plain: PropTypes.bool,
+  color: PropTypes.oneOfType(['green', 'red', 'blue', 'purple', 'fuchsia', 'yellow']),
+  className: PropTypes.string,
+};
+
+Sign.defaultProps = {
+  // size: 'default',
+  color: 'green',
+};
+
+export default Sign;

package/src/component/sign/style.less

@@ -0,0 +1,56 @@
+@import "../../styles/color";
+
+.sign-default {
+  display: inline-block;
+  padding: 2px 5px;
+  border-radius: 2px;
+  text-align: center;
+  font-size: 12px;
+
+  &-green {
+    background: #DCFAEA;
+    color: @green;
+  }
+  &-red {
+    background: #FFECEB;
+    color: @red;
+  }
+  &-blue {
+    background: #EBF5FF;
+    color: @blue;
+  }
+  &-purple {
+    background: #EBE6FF;
+    color: #8C68FE;
+  }
+  &-fuchsia {
+    background: #FEEBFF;
+    color: #B530FF;
+  }
+  &-yellow {
+    background: #FFFBEB;
+    color: #E6A117;
+  }
+}
+
+.sign-plain {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 4px;
+  text-align: center;
+  border: 1px solid;
+  font-size: 12px;
+
+  &-pink{
+    border-color: #FDD3D0;
+    color: #FB9088;
+  }
+  &-yellow{
+    border-color: #F6DDA1;
+    color: #E9AB17;
+  }
+  &-green{
+    border-color: #DCFAEA;
+    color: @green;
+  }
+}

package/src/component/sort-item/index.jsx

@@ -0,0 +1,3 @@
+import SortItem from './sort-item';
+
+export default SortItem;

package/src/component/sort-item/sort-item.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+
+class SortItem extends React.Component {
+  render() {
+    const {
+      title, children, onChange, value, options, className, order, style
+    } = this.props;
+    const isDesc = options.desc === value;
+    const isAsc = options.asc === value;
+    return (
+      <div
+        style={style}
+        className={[styles.sortItem, className, (isDesc || isAsc) && styles.highlight].join(' ')}
+        onClick={() => {
+          const key = isDesc ? 'desc' : isAsc ? 'asc' : 'default';
+          console.log('key', key, order.findIndex(v => v === key))
+          onChange(options[order[order.findIndex(v => v === key)+1]]);
+        }}
+      >
+        <div className={styles.title}>{title || children}</div>
+        <span
+          className={[
+            styles.icon,
+            isDesc && styles.asc,
+            isAsc && styles.desc
+          ].join(' ')}
+        />
+      </div>
+    );
+  }
+}
+
+SortItem.propTypes = {
+  style: PropTypes.object,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  value: PropTypes.any,
+  options: PropTypes.array,
+  onChange: PropTypes.func,
+};
+
+SortItem.defaultProps = {
+  options: {
+    desc: '0',
+    asc: '1',
+    default: undefined
+  }, // 升序=0；降序=1
+  order: ['default', 'asc', 'desc'],
+};
+
+export default SortItem;

package/src/component/sort-item/style.less

@@ -0,0 +1,52 @@
+@import "../../styles/var";
+
+.sortItem{
+  display: inline-block;
+  cursor: pointer;
+  padding: 5px 10px 5px 8px;
+  font-size:14px;
+  font-family: @medium;
+  color: @text-color;
+  user-select: none;
+  .title{
+    display: inline-block;
+    color: @text-color;
+  }
+  &.highlight{
+    border-color: @primary-color;
+    color: @primary-color;
+  }
+  .icon {
+    position: relative;
+    margin-left: 4px;
+    top: 2px;
+    height: 14px;
+    display: inline-block;
+    &:before{
+      position: absolute;
+      content: '';
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-bottom: 4px solid #A5ABB8;
+      top: 2px;
+    }
+    &:after{
+      position: absolute;
+      content: '';
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid #A5ABB8;
+      bottom: 2px;
+    }
+  }
+  .asc{
+    &:before{
+      border-bottom: 4px solid @primary-color;
+    }
+  }
+  .desc{
+    &:after{
+      border-top: 4px solid @primary-color;
+    }
+  }
+}

package/src/component/subscript/index.js

@@ -0,0 +1,3 @@
+import Subscript from './subscript';
+
+export default Subscript;

package/src/component/subscript/style.less

@@ -0,0 +1,63 @@
+@import "../../styles/color";
+
+.container-default{
+  width: 100px;
+  height: 80px;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+  cursor: pointer;
+
+  .tag{
+    color: @white;
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    left: -50%;
+  }
+
+  .blue{
+    background: @blue;
+  }
+  .green{
+    background: @green;
+  }
+  .red{
+    background: @red;
+  }
+  .orange{
+    background: @orange;
+  }
+}
+
+.container-full {
+  position: relative;
+  border-radius: inherit;
+  overflow: hidden;
+
+  .tag {
+    position: absolute;
+    color: @white;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 2%;
+  }
+
+  .blue{
+    background: @blue;
+  }
+  .green{
+    background: @green;
+  }
+  .red{
+    background: @red;
+  }
+  .orange{
+    background: @orange;
+  }
+}
+
+

package/src/component/subscript/subscript.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import mergeClassName from '../../tools/merge-class-name';
+
+const Tag = (props) => {
+  const {
+    style = {},
+    className = '',
+    full,
+    size,
+    color,
+    text,
+    rotate,
+    lateX,
+    lateY,
+    ...otherProps
+  } = props;
+  const theme = full ? 'full' : 'default';
+
+  return (
+    <div
+      className={
+        mergeClassName([
+          styles[`container-${theme}`],
+          className,
+        ])
+      }
+      style={full ? {
+        width: size,
+        height: size,
+      } : {}}
+      {...otherProps}
+    >
+      <div
+        className={
+          mergeClassName([
+            styles.tag,
+            styles[color],
+          ])
+        }
+        style={full ? {
+          width: size,
+          height: size,
+          transform: `rotate(-45deg) translate(${parseInt(size, 10) / 5}px,-${parseInt(size, 10) / 5 * 2}px)`,
+          transformOrigin: `0 ${parseInt(size, 10)}px`,
+          ...style,
+        } : {
+          transform: `rotate(${rotate}) translate(${lateX}, ${lateY})`,
+          ...style,
+        }}
+      >
+        {text}
+      </div>
+    </div>
+  );
+};
+
+Tag.propTypes = {
+  color: PropTypes.oneOf(['blue', 'green', 'red', 'orange']),
+  text: PropTypes.node,
+  children: PropTypes.node,
+  rotate: PropTypes.string, // 旋转角度
+  lateX: PropTypes.string, // 离直角的左右距离
+  lateY: PropTypes.string, // 离直角的偏移距离
+  full: PropTypes.bool,
+  size: PropTypes.number,
+};
+
+Tag.defaultProps = {
+  color: 'blue',
+  rotate: '-45deg',
+  lateX: '8px',
+  lateY: '30px',
+};
+
+export default Tag;

package/src/component/tab/index.jsx

@@ -0,0 +1,6 @@
+import Tab from './tab';
+import Panel from './panel';
+
+Tab.Panel = Panel;
+
+export default Tab;

package/src/component/tab/nav-child.jsx

@@ -0,0 +1,63 @@
+import React, { PureComponent, createRef } from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+
+import mergeClassName from '../../tools/merge-class-name';
+
+const setStyle = (width, auto) => {
+  const style = {};
+
+  if (auto) {
+    Object.assign(style, { minWidth: width });
+  } else {
+    Object.assign(style, { flex: 1 });
+  }
+
+  return style;
+};
+
+class Child extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.navChild = createRef();
+    this.text = createRef();
+    this.click = this.click.bind(this);
+  }
+
+  click() {
+    const { name, onClick } = this.props;
+    onClick(name);
+  }
+
+  render() {
+    const { tab, name, active, color, width, autoWidth } = this.props;
+    return (
+      <div
+        ref={this.navChild}
+        style={setStyle(width, autoWidth)}
+        className={mergeClassName([styles['sm-tab'], name === active && styles[`sm-tab-active-${color}`]])}
+        onClick={this.click}
+      >
+        <span ref={this.text} className={styles['sm-ellipsis']}>{tab}</span>
+      </div>
+    );
+  }
+}
+
+Child.propTypes = {
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tab: PropTypes.oneOfType([PropTypes.string, PropTypes.symbol]),
+  active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onClick: PropTypes.func,
+  color: PropTypes.oneOfType(['blue', 'red']),
+  width: PropTypes.string,
+  autoWidth: PropTypes.bool,
+};
+
+Child.defaultProps = {
+  color: 'blue',
+  width: '',
+  autoWidth: false,
+};
+
+export default Child;

package/src/component/tab/panel.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// 作为一个「跳板」的存在，目的是把tab和children传过去给tabs组件
+class Panel extends React.PureComponent {
+  render() {
+    const { tab, name } = this.props;
+    return (
+      <div>
+        {tab}
+        {name}
+      </div>
+    );
+  }
+}
+
+Panel.propTypes = {
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tab: PropTypes.oneOfType([PropTypes.string, PropTypes.symbol]),
+};
+
+export default Panel;

package/src/component/tab/style.less

@@ -0,0 +1,87 @@
+@import "../../styles/font";
+@import "../../styles/color";
+@import "../../styles/index";
+
+.sm-tabs {
+  //position: relative;
+  &-border {
+    border-bottom: 1px solid @gray-light;
+  }
+
+  overflow: hidden;
+
+  &-nav {
+    display: flex;
+
+    position: relative;
+
+    user-select: none;
+    //transition-duration: 0.15s;
+
+    &-scroll{
+      overflow-x: auto;
+      scroll-behavior: smooth; // 滚动的过渡效果
+      -webkit-overflow-scrolling: touch;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &-line {
+    height: 3px;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+
+    background-color: @blue;
+    border-radius: 3px;
+
+    transition-duration: 0.15s;
+
+    &-red {
+      background-color: @red;
+    }
+
+    &-blue {
+      background-color: @blue;
+    }
+  }
+}
+
+.sm-tab {
+  position: relative;
+
+  flex-shrink: 0;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 0 15px;
+  color: @gray-darker;
+  font-size: @size-normal;
+
+  text-align: center;
+  cursor: pointer;
+
+  span{
+    max-width: 100%;
+    display: inline-block; // 为了获取span中内容的长度
+    line-height: 40px;
+  }
+
+  &-active-blue{
+    color: @blue;
+    font-weight: @weight-bold;
+  }
+
+  &-active-red{
+    color: @red;
+    font-weight: @weight-bold;
+  }
+}
+
+.tab-header{
+  display: flex;
+}