frc-ui - npm Package Compare versions

Comparing version 0.0.0-beta.1 to 0.0.0-beta.2

es/index.d.ts

@@ -5,2 +5,2 @@ export { default as Loading } from './loading';
 export { default as NotFound } from './notfound';
-export { default as Collapse } from './collapse';
+export { default as CollapseButton } from './collapse-button';

es/index.js

@@ -5,2 +5,2 @@ export { default as Loading } from './loading';
 export { default as NotFound } from './notfound';
-export { default as Collapse } from './collapse';
+export { default as CollapseButton } from './collapse-button';

es/tabs/style/css.d.ts

@@ -0,1 +1,2 @@
+import 'antd/lib/radio/style/css';
 import './index.css';

es/tabs/style/css.js

@@ -0,1 +1,2 @@
+import 'antd/lib/radio/style/css';
 import './index.css';

es/tabs/style/index.d.ts

@@ -0,1 +1,2 @@
+import 'antd/es/radio/style';
 import './index.less';

es/tabs/style/index.js

@@ -0,1 +1,2 @@
+import 'antd/es/radio/style';
 import './index.less';

es/tabs/Tabs.d.ts

 import React from 'react';
+import { RadioChangeEvent } from 'antd/es/radio';
+declare type OptionProps = {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    color?: string;
+    background?: string;
+    width?: number;
+};
 interface TabsProps {
     className?: string;
     onChange?: Function;
+    showAll?: boolean;
+    multi?: boolean;
+    value?: string | number | Array<string | number>;
+    options: Array<OptionProps>;
+    children?: any;
+    itemWidth?: number;
+    label?: string;
 }
-declare class Tabs extends React.PureComponent<TabsProps> {
+interface TabsState {
+    value?: string | number | Array<string | number>;
+}
+declare class Tabs extends React.PureComponent<TabsProps, TabsState> {
+    static defaultProps: {
+        showAll: boolean;
+        multi: boolean;
+        itemWidth: number;
+    };
+    constructor(props: any);
+    componentWillReceiveProps(nextProps: TabsProps): void;
+    h_change: (ev: RadioChangeEvent) => void;
+    f_checked: (v: string | number) => boolean;
+    r_button: () => JSX.Element[];
     render(): JSX.Element;
 }
 export default Tabs;

es/tabs/Tabs.js

@@ -0,10 +1,120 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
 import classNames from 'classnames';
+import { Radio } from 'antd';
+const { Group, Button } = Radio;
 class Tabs extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.h_change = (ev) => {
+            const { multi, onChange, options, showAll } = this.props;
+            let stateValue = this.state.value;
+            let value = ev.target.value;
+            if (multi) {
+                if (value === 'all') {
+                    value = ['all'];
+                }
+                else {
+                    const sv = stateValue || [];
+                    if (sv instanceof Array) {
+                        if (!sv.some(va => va === value)) {
+                            value = [...sv.filter(v => v !== 'all'), value];
+                        }
+                        else {
+                            value = sv.filter(v => v !== value);
+                        }
+                    }
+                }
+                if (showAll) {
+                    const sa = options.some(o => !o.disabled && value.indexOf(o.value) < 0);
+                    if (!sa || value.length === 0) {
+                        value = ['all'];
+                    }
+                }
+            }
+            this.setState({ value }, () => {
+                if (typeof onChange === 'function') {
+                    onChange(value, ev.target.value);
+                }
+            });
+        };
+        this.f_checked = (v) => {
+            const { value } = this.state;
+            const { multi } = this.props;
+            if (multi) {
+                const vs = value || [];
+                return vs instanceof Array && vs.some(va => va === v);
+            }
+            else {
+                return value === v;
+            }
+        };
+        this.r_button = () => {
+            const { showAll } = this.props;
+            let options = this.props.options || [];
+            if (showAll) {
+                const all = { label: '全部', value: 'all' };
+                options = [all, ...options];
+            }
+            return (options || []).map(o => {
+                const style = { width: this.props.itemWidth };
+                const checked = this.f_checked(o.value);
+                checked && (style.background = '#FF9300');
+                checked && (style.color = '#1E1E1E');
+                o.width && (style.width = o.width);
+                (checked && o.background) && (style.background = o.background);
+                (checked && o.color) && (style.color = o.color);
+                const cls = classNames({
+                    ['swc-tabs-checked']: checked
+                });
+                return React.createElement(Button, { key: o.value, style: style, value: o.value, className: cls, checked: false }, o.label);
+            });
+        };
+        const { showAll, multi } = props;
+        let value = props.value;
+        if (showAll && !value) {
+            value = (multi ? ['all'] : 'all');
+        }
+        this.state = {
+            value
+        };
+    }
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.value !== this.props.value) {
+            this.setState({ value: nextProps.value });
+        }
+    }
     render() {
-        const { className } = this.props;
+        const _a = this.props, { className, children, label } = _a, other = __rest(_a, ["className", "children", "label"]);
+        const { value } = this.state;
+        delete other.onChange;
+        delete other.value;
+        delete other.options;
         const cls = classNames('swc-tabs', className);
-        return (React.createElement("div", { className: cls }));
+        const child = (React.createElement(Group, Object.assign({}, other, { className: cls, onChange: this.h_change, value: value }), children || this.r_button()));
+        if (label) {
+            return (React.createElement("div", { className: 'swc-tabs-wrapper' },
+                React.createElement("label", null,
+                    label,
+                    ":"),
+                child));
+        }
+        return child;
     }
 }
+Tabs.defaultProps = {
+    showAll: false,
+    multi: false,
+    itemWidth: 60
+};
 export default Tabs;

lib/index.js

@@ -30,6 +30,6 @@ "use strict";
 });
-Object.defineProperty(exports, "Collapse", {
+Object.defineProperty(exports, "CollapseButton", {
   enumerable: true,
   get: function get() {
-    return _collapse["default"];
+    return _collapseButton["default"];
   }
@@ -46,4 +46,4 @@ });
 
-var _collapse = _interopRequireDefault(require("./collapse"));
+var _collapseButton = _interopRequireDefault(require("./collapse-button"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

lib/tabs/style/css.js

 "use strict";
 
+require("antd/lib/radio/style/css");
+
 require("./index.css");

lib/tabs/style/index.js

 "use strict";
 
+require("antd/es/radio/style");
+
 require("./index.less");

lib/tabs/Tabs.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _antd = require("antd");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -17,2 +19,12 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -34,2 +46,18 @@
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var Group = _antd.Radio.Group,
+    Button = _antd.Radio.Button;
+
 var Tabs =
@@ -40,16 +68,159 @@ /*#__PURE__*/
 
-  function Tabs() {
+  function Tabs(props) {
+    var _this;
+
     _classCallCheck(this, Tabs);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Tabs).apply(this, arguments));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Tabs).call(this, props));
+
+    _this.h_change = function (ev) {
+      var _this$props = _this.props,
+          multi = _this$props.multi,
+          onChange = _this$props.onChange,
+          options = _this$props.options,
+          showAll = _this$props.showAll;
+      var stateValue = _this.state.value;
+      var value = ev.target.value;
+
+      if (multi) {
+        if (value === 'all') {
+          value = ['all'];
+        } else {
+          var sv = stateValue || [];
+
+          if (sv instanceof Array) {
+            if (!sv.some(function (va) {
+              return va === value;
+            })) {
+              value = [].concat(_toConsumableArray(sv.filter(function (v) {
+                return v !== 'all';
+              })), [value]);
+            } else {
+              value = sv.filter(function (v) {
+                return v !== value;
+              });
+            }
+          }
+        }
+
+        if (showAll) {
+          var sa = options.some(function (o) {
+            return !o.disabled && value.indexOf(o.value) < 0;
+          });
+
+          if (!sa || value.length === 0) {
+            value = ['all'];
+          }
+        }
+      }
+
+      _this.setState({
+        value: value
+      }, function () {
+        if (typeof onChange === 'function') {
+          onChange(value, ev.target.value);
+        }
+      });
+    };
+
+    _this.f_checked = function (v) {
+      var value = _this.state.value;
+      var multi = _this.props.multi;
+
+      if (multi) {
+        var vs = value || [];
+        return vs instanceof Array && vs.some(function (va) {
+          return va === v;
+        });
+      } else {
+        return value === v;
+      }
+    };
+
+    _this.r_button = function () {
+      var showAll = _this.props.showAll;
+      var options = _this.props.options || [];
+
+      if (showAll) {
+        var all = {
+          label: '全部',
+          value: 'all'
+        };
+        options = [all].concat(_toConsumableArray(options));
+      }
+
+      return (options || []).map(function (o) {
+        var style = {
+          width: _this.props.itemWidth
+        };
+
+        var checked = _this.f_checked(o.value);
+
+        checked && (style.background = '#FF9300');
+        checked && (style.color = '#1E1E1E');
+        o.width && (style.width = o.width);
+        checked && o.background && (style.background = o.background);
+        checked && o.color && (style.color = o.color);
+        var cls = (0, _classnames["default"])(_defineProperty({}, 'swc-tabs-checked', checked));
+        return _react["default"].createElement(Button, {
+          key: o.value,
+          style: style,
+          value: o.value,
+          className: cls,
+          checked: false
+        }, o.label);
+      });
+    };
+
+    var showAll = props.showAll,
+        multi = props.multi;
+    var value = props.value;
+
+    if (showAll && !value) {
+      value = multi ? ['all'] : 'all';
+    }
+
+    _this.state = {
+      value: value
+    };
+    return _this;
   }
 
   _createClass(Tabs, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.value !== this.props.value) {
+        this.setState({
+          value: nextProps.value
+        });
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var className = this.props.className;
+      var _a = this.props,
+          className = _a.className,
+          children = _a.children,
+          label = _a.label,
+          other = __rest(_a, ["className", "children", "label"]);
+
+      var value = this.state.value;
+      delete other.onChange;
+      delete other.value;
+      delete other.options;
       var cls = (0, _classnames["default"])('swc-tabs', className);
-      return _react["default"].createElement("div", {
-        className: cls
-      });
+
+      var child = _react["default"].createElement(Group, Object.assign({}, other, {
+        className: cls,
+        onChange: this.h_change,
+        value: value
+      }), children || this.r_button());
+
+      if (label) {
+        return _react["default"].createElement("div", {
+          className: 'swc-tabs-wrapper'
+        }, _react["default"].createElement("label", null, label, ":"), child);
+      }
+
+      return child;
     }
@@ -61,3 +232,8 @@ }]);
 
+Tabs.defaultProps = {
+  showAll: false,
+  multi: false,
+  itemWidth: 60
+};
 var _default = Tabs;
 exports["default"] = _default;

package.json

 {
   "name": "frc-ui",
-  "version": "0.0.0-beta.1",
+  "version": "0.0.0-beta.2",
   "description": "React Web UI",
@@ -37,2 +37,3 @@ "main": "lib/index.js",
     "@types/react-dom": "^16.8.1",
+    "antd": "^3.19.8",
     "chalk": "^2.4.2",
@@ -39,0 +40,0 @@ "classnames": "^2.2.6",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48679

increased by41.69%

Lines of code

1161

increased by46.22%

Worsened metrics

Dev dependency count

27

increased by3.85%

No dependency changes