@sheinoutmobile/shineoutmobile 1.8.2

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sheinoutmobile/shineoutmobile",
+  "version": "1.8.2",
+  "main": "lib/index.js",
+  "license": "MIT",
+  "config": {
+    "lib": "ShineoutMobile"
+  },
+  "scripts": {
+    "build": "npx rct lib",
+    "test": "npx rct test",
+    "doc": "npx rct doc",
+    "doc:dev": "npx rct doc --dev",
+    "lint": "npx eslint . --ext js,jsx --fix",
+    "postinstall": "rm -rf node_modules/rollup-plugin-babel/node_modules/rollup-pluginutils",
+    "preinstall": "node src/index.js"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": "npx eslint . --ext js,jsx"
+  },
+  "engines": {
+    "node": ">= 8.0.0"
+  },
+  "devDependencies": {
+    "@shein/eslint-config": "latest",
+    "@shein/react-component-tool": "^0.2.64",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.3",
+    "webpack-dev-server": "^3.1.8"
+  },
+  "peerDependencies": {
+    "prop-types": "*",
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "dependencies": {
+    "classnames": ">=2",
+    "lodash-es": "^4.17.15",
+    "react-photo-view": "^0.3.7",
+    "react-transition-group": "^4.3.0"
+  }
+}

package/src/component/button/button.jsx

@@ -0,0 +1,83 @@
+import React, { PureComponent, Children } from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+
+import mergeClassName from '../../tools/merge-class-name';
+import Loading from '../loading';
+
+class Button extends PureComponent {
+  getChildren() {
+    const { title, children, loading, loadingText } = this.props;
+    // if (!loading) return title || children;
+    if (loading) return loadingText;
+
+    const filtered = Children
+      .toArray(children)
+      .filter(child => child !== null);
+    return title || filtered;
+  }
+
+  render() {
+    const {
+      type, size, plain, href, loading, disabled,
+      className, children, htmlType, round,
+      ...others
+    } = this.props;
+
+    const finallyClassName = mergeClassName([
+      styles['sm-button'],
+      styles[`sm-button-${type || 'default'}`],
+      styles[`sm-button-size-${size || 'default'}`],
+      round && styles['sm-button-round'],
+      plain && styles['sm-button-plain'],
+      disabled && styles['sm-button-disabled'],
+      loading && styles['sm-button-loading'],
+      className,
+    ]);
+
+    if (href) {
+      return (
+        <a href={href} {...others} className={finallyClassName}>
+          {children}
+        </a>
+      );
+    }
+
+    const finallyChildren = this.getChildren();
+
+    return (
+      <button
+        // type={htmlType}
+        type="button"
+        className={finallyClassName}
+        disabled={disabled || loading}
+        {...others}
+      >
+        {loading && (<Loading className={styles['sm-button-loading-spinner']} />)}
+        {finallyChildren}
+      </button>
+    );
+  }
+}
+
+Button.propTypes = {
+  title: PropTypes.node,
+  children: PropTypes.node,
+  type: PropTypes.oneOf(['default', 'primary', 'info', 'danger']),
+  size: PropTypes.oneOf(['mini', 'small', 'large']),
+  plain: PropTypes.bool,
+  href: PropTypes.string,
+  round: PropTypes.bool,
+  className: PropTypes.string,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  htmlType: PropTypes.string,
+  loadingText: PropTypes.node,
+};
+
+Button.defaultProps = {
+  htmlType: 'button',
+  type: 'default',
+};
+
+export default Button;

package/src/component/button/index.jsx

@@ -0,0 +1,3 @@
+import Button from './button';
+
+export default Button;

package/src/component/button/style.less

@@ -0,0 +1,132 @@
+@import "../../styles/var";
+
+.sm-button {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  height: 35px;
+  line-height: 35px;
+
+  font-size: @size-big;
+  text-align: center;
+  border-radius: @button-border-radius;
+  outline:none;
+  -webkit-appearance: none;
+  -webkit-text-size-adjust: 100%;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: @black;
+    border-color: @black;
+    border-radius: inherit;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+  &:active::before {
+    opacity: .1;
+  }
+
+  // type
+  &-default {
+    color: @text-color;
+    background-color: @white;
+    border: 1px solid @border-color;
+  }
+  &-primary {
+    color: @white;
+    background-color: @blue;
+    border: 1px solid @blue;
+  }
+  &-success {
+    color: @white;
+    background-color: @green;
+    border: 1px solid @green;
+  }
+  &-danger {
+    color: @white;
+    background-color: @red;
+    border: 1px solid @red;
+  }
+  &-warning {
+    color: @white;
+    background-color: @orange;
+    border: 1px solid @orange;
+  }
+
+  // plain
+  &-plain {
+    background-color: @white;
+    &.sm-button-primary{
+      color: @blue;
+    }
+    &.sm-button-success{
+      color: @green;
+    }
+    &.sm-button-danger{
+      color: @red;
+    }
+    &.sm-button-warning{
+      color: @orange;
+    }
+  }
+
+  // size
+  &-size-default {
+    padding: 0 15px;
+    font-size: @size-normal;
+  }
+  &-size-small {
+    min-width: 60px;
+    height: 30px;
+    padding: 0 8px;
+    font-size: 12px;
+    line-height: 28px;
+  }
+  &-size-large {
+    width: 100%;
+    height: 50px;
+    line-height: 48px;
+  }
+  &-size-mini {
+    display: inline-block;
+    min-width: 50px;
+    height: 22px;
+    line-height: 20px;
+
+    font-size: 10px;
+    border-radius: @button-mini-border-radius;
+  }
+
+  // disabled
+  &-disabled {
+    opacity: @button-disabled-opacity;
+    background-color: @button-disabled-background-color;
+    color: @text-color-light;
+    border: 1px solid @button-disabled-background-color;;
+  }
+
+  // 圆角button
+  &-round {
+    border-radius: @button-round-border-radius;
+  }
+
+  &-loading{
+    opacity: @button-loading-opacity;
+
+    & &-spinner{
+      display: inline-block;
+      width: auto;
+      margin-right: 4px;
+
+      vertical-align: top;
+      color: @white;
+    }
+  }
+}

package/src/component/cell/cell.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import Icon from '../icons/mrp';
+
+const Cell = (args) => {
+  const { label, value, onClick, isLink, leftIcon, rightIcon, children } = args;
+
+  const LeftIcon = React.isValidElement(leftIcon) ? leftIcon :
+    leftIcon && <Icon className={styles.leftIcon} name={leftIcon} fontSize={16} />;
+
+  const Title = (label || leftIcon) && (
+    <div
+      style={args.titleStyle}
+      className={[styles.cellTitle, (children && styles.cellChildrenTittle)].join(' ')}
+    >
+      <span className={args.required ? styles.redStar : styles.placeholderStar}>*</span>
+      {label && <span>{label}</span>}
+    </div>
+  );
+
+  const Value = (
+    <div
+      className={[
+        styles.cellValue,
+        (!label && styles.cellValueAlone),
+        (!React.isValidElement(value) && styles.strValue),
+      ].join(' ')}
+      style={args.valueStyle}
+    >
+      { value }
+    </div>
+  );
+
+  const RightIcon = (isLink || rightIcon) && (
+    <Icon
+      className={styles.rightIcon}
+      name={rightIcon || 'towardstheright'}
+      fontSize={16}
+    />
+  );
+
+  return (
+    <div onClick={onClick} className={styles.cell}>
+      <div className={styles.row}>
+        {LeftIcon}
+        {Title}
+        {Value}
+        {RightIcon}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+Cell.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  onClick: PropTypes.func,
+  required: PropTypes.bool,
+  isLink: PropTypes.bool,
+  labelStyle: PropTypes.object,
+  titleStyle: PropTypes.object,
+  valueStyle: PropTypes.object,
+  leftIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  rightIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+};
+
+Cell.defaultProps = {};
+
+export default Cell;

package/src/component/cell/index.jsx

@@ -0,0 +1,3 @@
+import Cell from './cell';
+
+export default Cell;

package/src/component/cell/style.less

@@ -0,0 +1,86 @@
+@import "../../styles/var";
+
+.cell{
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 15px;
+  overflow: hidden;
+  color: @text-color;
+  font-size: @size-normal;
+  line-height: 24px;
+  background-color: #fff;
+}
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.cell:not(:last-child)::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-bottom: 1px solid @border-color;
+  transform: scaleY(0.5);
+}
+
+.cellTitle {
+  //flex: 1;
+  width: 140px;
+}
+.cellChildrenTittle {
+  flex: none;
+}
+.cellValue {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  color: @text-color;
+  vertical-align: middle;
+  word-wrap: break-word;
+  min-height: 24px;
+}
+.cellValueAlone {
+  color: @text-color;
+  text-align: left;
+}
+.strValue {
+  padding: 2px 4px;
+}
+.leftIcon, .rightIcon {
+  margin-left:5px;
+  color: #A5ACB8
+}
+.cellControl {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  color: @text-color;
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+  resize: none;
+}
+/*必填项的星号*/
+.redStar {
+  color: #F06156;
+  font-size: 18px;
+  vertical-align: middle;
+  margin-left: 5px;
+}
+.placeholderStar {
+  color: transparent;
+  font-size: 18px;
+  vertical-align: middle;
+  margin-left: 5px;
+}

package/src/component/cell-group/cell-group.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+
+const CellGroup = (props) => {
+  const { title, children } = props;
+
+  return (
+    <div className={styles.group}>
+      {title && <div className={styles.blockTitle}>{title}</div>}
+      {children}
+    </div>
+  );
+};
+
+CellGroup.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+};
+
+CellGroup.defaultProps = {
+
+};
+
+export default CellGroup;

package/src/component/cell-group/index.jsx

@@ -0,0 +1,3 @@
+import CellGroup from './cell-group';
+
+export default CellGroup;

package/src/component/cell-group/style.less

@@ -0,0 +1,22 @@
+@import "../../styles/var";
+
+.group {
+  background: @white;
+  position: relative;
+}
+
+div > .group:not(:last-child) {
+  margin-bottom: 12px;
+}
+
+.blockTitle {
+  height: 50px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 15px;
+  color: #35383D;
+  font-weight: normal;
+  font-size: @size-big;
+  background: @background-color;
+}

package/src/component/checkbox/checkbox.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import Icon from '../icons/mrp';
+import mergeClassName from "../../tools/merge-class-name";
+
+import CheckboxButton from './kind/checkbox-button';
+
+const icons = {
+  square: ['select_selected', 'select_unselected'],
+  round: ['select_selected', 'select_unselected'],
+};
+
+const name = 'sm-checkbox';
+
+class Checkbox extends React.Component {
+  handleClick = (e) => {
+    const { value, onChange } = this.props;
+    if(onChange instanceof Function) {
+      onChange(!value);
+    }
+    e.stopPropagation();
+    e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
+  }
+  render() {
+    const {
+      style,
+      className,
+      value,
+      shape,
+      color,
+      size,
+      disabled,
+      label,
+      labelPosition,
+      labelStyle,
+      ...otherProps
+    } = this.props;
+
+    const labelComponent = React.isValidElement(label)
+      ? label : <div style={labelStyle}>{label}</div>;
+
+    return (
+      <div
+        style={style}
+        className={
+          mergeClassName([
+            styles[name],
+            className,
+          ])
+        }
+        {...otherProps}
+        onClick={this.handleClick}
+      >
+        {labelPosition==='left' ? labelComponent : null}
+        <Icon
+          className={styles[`${name}-icon-${labelPosition}`]}
+          name={value ? icons[shape][0] : icons[shape][1]}
+          fontSize={size}
+          style={value && !disabled ? { color } : {}}
+        />
+        {labelPosition==='right' ? labelComponent : null}
+      </div>
+    );
+  }
+}
+
+Checkbox.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  shape: PropTypes.oneOf(['square', 'round']),
+  color: PropTypes.string,
+  label: PropTypes.string,
+  labelPosition: PropTypes.oneOf(['left', 'right']),
+  labelStyle: PropTypes.object,
+  size: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+Checkbox.defaultProps = {
+  shape: 'square',
+  color: '#1989fa',
+  labelPosition: 'right',
+  size: 24,
+  disabled: false,
+};
+
+// 类似button样式的checkbox
+Checkbox.CheckboxButton = CheckboxButton;
+
+export default Checkbox;

package/src/component/checkbox/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './checkbox';
+
+export default Checkbox;

package/src/component/checkbox/kind/checkbox-button.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../style.less';
+import mergeClassName from "../../../tools/merge-class-name";
+import checkKey from "../../../tools/object-key-check";
+
+const name = 'sm-checkbox-button';
+
+class Checkbox extends React.Component{
+  constructor(props) {
+    super(props);
+    this.state = { checkedState: false };
+  }
+  render() {
+    const { checkedState } = this.state;
+    const { children, className, value, onChange, ...other } = this.props;
+
+    let realChecked = checkKey(this.props, 'value') ? value : checkedState; // 判断value是否从外部传入
+
+    return (
+      <button
+        type="button"
+        className={mergeClassName([className, styles[name], realChecked && styles[`${name}-checked`]])}
+        {...other}
+        onClick={() => typeof onChange === 'function'
+          ? onChange(!realChecked)
+          : this.setState({checkedState: !realChecked})
+        }
+      >
+        {children}
+      </button>
+    );
+  }
+}
+
+Checkbox.propTypes = {
+  value: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default Checkbox;

package/src/component/checkbox/style.less

@@ -0,0 +1,49 @@
+@import "../../styles/color";
+@import "../../styles/font";
+@import "../../styles/spacing";
+
+.sm-checkbox {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: @size-normal;
+  color: #A5ACB8;
+
+  &-icon-left {
+    margin-left: 8px;
+  }
+
+  &-icon-right {
+    margin-right: 8px;
+  }
+}
+
+.sm-checkbox-button{
+  height: 40px;
+
+  display: inline-block;
+  box-sizing: border-box;
+
+  background: @blue-min;
+  color: @text-color;
+
+  font-size: @size-small;
+  text-align: center;
+  border-radius: @radius;
+  outline:none;
+  -webkit-appearance: none;
+  -webkit-text-size-adjust: 100%;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  border: 1px solid @border-color;
+
+  &-checked{
+    background: @blue;
+    color: @white;
+    border-color: @blue;
+  }
+}