dtable-ui-component 0.1.75-beta → 0.1.75-beta1

package/lib/components/cell-editor-popover/pc-date-editor-popover.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
+
+var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
+
+var _editorUtils = require("../../utils/editor-utils");
+
+require("@seafile/seafile-calendar/assets/index.css");
+
+var _lang = require("../../lang");
+
+var propTypes = {
+  lang: _propTypes.default.string.isRequired,
+  value: _propTypes.default.string,
+  dateFormat: _propTypes.default.string.isRequired,
+  showHourAndMinute: _propTypes.default.bool.isRequired,
+  onValueChanged: _propTypes.default.func.isRequired
+};
+
+var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(PCDateEditorPopover, _React$Component);
+
+  function PCDateEditorPopover(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (value) {
+      if (!value) return;
+      var dateFormat = _this.props.dateFormat;
+
+      _this.setState({
+        datePickerValue: value,
+        open: true // if value changed, don't close datePicker
+
+      });
+
+      _this.props.onValueChanged(value.format(dateFormat));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenChange", function (open) {
+      _this.setState({
+        open: open
+      });
+
+      return;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
+      _this.setState({
+        datePickerValue: null
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocusDatePicker", function () {
+      _this.setState({
+        open: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCalendarContainer", function () {
+      return _this.calendarContainerRef.current;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCalender", function () {
+      var _this$props = _this.props,
+          dateFormat = _this$props.dateFormat,
+          showHourAndMinute = _this$props.showHourAndMinute,
+          lang = _this$props.lang;
+      var defaultValue = (0, _moment.default)().clone();
+      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
+        locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+        style: {
+          zIndex: 1001
+        },
+        format: dateFormat,
+        defaultValue: defaultValue,
+        showHourAndMinute: showHourAndMinute,
+        dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
+        showDateInput: true,
+        focusablePanel: false,
+        onClear: _this.onClear
+      });
+    });
+    _this.state = {
+      open: true,
+      datePickerValue: props.value ? (0, _moment.default)(props.value) : null
+    };
+    _this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
+    return _this;
+  } // event trigger sequence: onOpenChange --> onChange
+
+
+  var _proto = PCDateEditorPopover.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var dateFormat = this.props.dateFormat;
+    var _this$state = this.state,
+        open = _this$state.open,
+        datePickerValue = _this$state.datePickerValue;
+    var calendar = this.getCalender();
+    return /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      open: open,
+      value: datePickerValue,
+      animation: "slide-up",
+      style: {
+        zIndex: 1001
+      },
+      calendar: calendar,
+      getCalendarContainer: this.getCalendarContainer,
+      onChange: this.onChange,
+      onOpenChange: this.onOpenChange
+    }, function (_ref) {
+      var value = _ref.value;
+      value = value && value.format(dateFormat);
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "dtable-ui-date-editor-container",
+        tabIndex: "0",
+        onFocus: _this2.onFocusDatePicker
+      }, /*#__PURE__*/_react.default.createElement("input", {
+        readOnly: true,
+        tabIndex: "-1",
+        className: "form-control",
+        placeholder: (0, _lang.getLocale)('Please_select'),
+        value: value || '',
+        onMouseDown: _this2.handleMouseDown
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        ref: _this2.calendarContainerRef
+      }));
+    });
+  };
+
+  return PCDateEditorPopover;
+}(_react.default.Component);
+
+PCDateEditorPopover.propTypes = propTypes;
+var _default = PCDateEditorPopover;
+exports.default = _default;

package/lib/components/cell-editor-popover/pc-link-editor-popover.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lang = require("../../lang");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var propTypes = {
+  popoverPosition: _propTypes.default.object.isRequired,
+  options: _propTypes.default.array.isRequired,
+  selectedOptions: _propTypes.default.array.isRequired,
+  onOptionItemToggle: _propTypes.default.func.isRequired
+};
+
+var PCLinkEditorPopover = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(PCLinkEditorPopover, _React$Component);
+
+  function PCLinkEditorPopover(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onValueChanged", function (event) {
+      var value = event.target.value;
+
+      _this.setState({
+        searchValue: value
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputClick", function (event) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionItemToggle", function (item) {
+      _this.props.onOptionItemToggle(item);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFilterOptions", function () {
+      var options = _this.props.options;
+
+      var filter = _this.state.searchValue.toLowerCase();
+
+      if (!filter) {
+        return options;
+      }
+
+      return options.filter(function (option) {
+        return option.name.toString().toLowerCase().indexOf(filter) > -1;
+      });
+    });
+    _this.state = {
+      searchValue: ''
+    };
+    return _this;
+  }
+
+  var _proto = PCLinkEditorPopover.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var options = this.getFilterOptions();
+    var _this$props = this.props,
+        popoverPosition = _this$props.popoverPosition,
+        selectedOptions = _this$props.selectedOptions;
+    var searchValue = this.state.searchValue;
+    var popoverStyle = Object.assign({}, _objectSpread({}, popoverPosition), {
+      position: 'absolute'
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-popover dtable-ui-link-editor-popover",
+      style: popoverStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "link-options-search"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      value: searchValue,
+      onChange: this.onValueChanged,
+      onClick: this.onInputClick,
+      placeholder: (0, _lang.getLocale)('Find_an_option')
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "link-options-container"
+    }, options.length > 0 && options.map(function (option, index) {
+      var isSelect = selectedOptions.some(function (selectedOption) {
+        return selectedOption.id === option.id;
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: "link-option-item",
+        onClick: _this2.onOptionItemToggle.bind(_this2, option)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-info"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-name"
+      }, option.name)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-checked"
+      }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })));
+    }), options.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "link-option-null"
+    }, (0, _lang.getLocale)('No_options_available'))));
+  };
+
+  return PCLinkEditorPopover;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(PCLinkEditorPopover, "defaultProps", {
+  popoverPosition: {},
+  options: []
+});
+PCLinkEditorPopover.propTypes = propTypes;
+var _default = PCLinkEditorPopover;
+exports.default = _default;

package/lib/components/cell-editor-popover/pc-select-editor-popover.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lang = require("../../lang");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var propTypes = {
+  popoverPosition: _propTypes.default.object.isRequired,
+  options: _propTypes.default.array.isRequired,
+  selectedOptions: _propTypes.default.array.isRequired,
+  onOptionItemToggle: _propTypes.default.func.isRequired,
+  isSupportNewOption: _propTypes.default.bool,
+  onAddNewOption: _propTypes.default.func
+};
+
+var PCSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(PCSelectEditorPopover, _React$Component);
+
+  function PCSelectEditorPopover(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onValueChanged", function (event) {
+      var value = event.target.value;
+
+      _this.setState({
+        searchValue: value
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputClick", function (event) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onAddNewOption", function () {
+      var name = _this.state.searchValue.trim();
+
+      _this.props.onAddNewOption(name);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionItemToggle", function (item) {
+      _this.props.onOptionItemToggle(item);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFilterOptions", function () {
+      var options = _this.props.options;
+
+      var filter = _this.state.searchValue.toLowerCase();
+
+      if (!filter) {
+        return options;
+      }
+
+      return options.filter(function (option) {
+        return option.name.toString().toLowerCase().indexOf(filter) > -1;
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptionStyle", function (option) {
+      var textColor = option.textColor || null;
+      return {
+        display: 'inline-block',
+        padding: '0px 10px',
+        height: '20px',
+        lineHeight: '20px',
+        borderRadius: '10px',
+        fontSize: '13px',
+        backgroundColor: option.color,
+        color: textColor
+      };
+    });
+    _this.state = {
+      searchValue: ''
+    };
+    return _this;
+  }
+
+  var _proto = PCSelectEditorPopover.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var options = this.getFilterOptions();
+    var _this$props = this.props,
+        popoverPosition = _this$props.popoverPosition,
+        selectedOptions = _this$props.selectedOptions,
+        isSupportNewOption = _this$props.isSupportNewOption;
+    var searchValue = this.state.searchValue;
+    var popoverStyle = Object.assign({}, _objectSpread({}, popoverPosition), {
+      position: 'absolute'
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-popover dtable-ui-select-editor-popover",
+      style: popoverStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-options-search"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      onChange: this.onValueChanged,
+      onClick: this.onInputClick,
+      placeholder: (0, _lang.getLocale)('Find_an_option')
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-options-container"
+    }, options.length > 0 && options.map(function (option, index) {
+      var optionStyle = _this2.getOptionStyle(option);
+
+      var isSelect = selectedOptions.some(function (selectedOption) {
+        return selectedOption.id === option.id;
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: "select-option-item",
+        onClick: _this2.onOptionItemToggle.bind(_this2, option)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-info"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-name",
+        style: optionStyle
+      }, option.name)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-checked"
+      }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })));
+    }), options.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-option-null"
+    }, (0, _lang.getLocale)('No_options_available'))), isSupportNewOption && !!searchValue && /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-options-add",
+      onClick: this.onAddNewOption
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Add_an_option'), ' ', searchValue)));
+  };
+
+  return PCSelectEditorPopover;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(PCSelectEditorPopover, "defaultProps", {
+  popoverPosition: {},
+  options: [],
+  isShowAddBtn: false
+});
+PCSelectEditorPopover.propTypes = propTypes;
+var _default = PCSelectEditorPopover;
+exports.default = _default;

package/lib/components/cell-factory/cell-formatter-factory.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _formatterConfig = _interopRequireDefault(require("../cell-formatter/formatter-config"));
+
+var CellFormatterFactory = /*#__PURE__*/function () {
+  function CellFormatterFactory() {}
+
+  var _proto = CellFormatterFactory.prototype;
+
+  _proto.createFormatter = function createFormatter(formatterType) {
+    if (_formatterConfig.default[formatterType]) {
+      return _formatterConfig.default[formatterType];
+    }
+
+    return null;
+  };
+
+  return CellFormatterFactory;
+}();
+
+var cellFormatterFactory = new CellFormatterFactory();
+var _default = cellFormatterFactory;
+exports.default = _default;

package/lib/components/cell-formatter/auto-number-formatter.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var propTypes = {
+  value: _propTypes.default.string.isRequired,
+  containerClassName: _propTypes.default.string
+};
+
+var AutoNumberFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(AutoNumberFormatter, _React$Component);
+
+  function AutoNumberFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = AutoNumberFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        containerClassName = _this$props.containerClassName,
+        value = _this$props.value;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, value);
+  };
+
+  return AutoNumberFormatter;
+}(_react.default.Component);
+
+AutoNumberFormatter.propTypes = propTypes;
+var _default = AutoNumberFormatter;
+exports.default = _default;

package/lib/components/cell-formatter/button-formatter.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var propTypes = {
+  data: _propTypes.default.object,
+  containerClassName: _propTypes.default.string,
+  optionColors: _propTypes.default.array
+};
+
+var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ButtonFormatter, _React$Component);
+
+  function ButtonFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = ButtonFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        data = _this$props.data,
+        containerClassName = _this$props.containerClassName,
+        optionColors = _this$props.optionColors;
+
+    var _ref = data || {},
+        button_color = _ref.button_color,
+        button_type = _ref.button_type,
+        button_name = _ref.button_name;
+
+    if (!button_type) return null;
+    var colorOption = Array.isArray(optionColors) ? optionColors.find(function (item) {
+      return item.COLOR === button_color;
+    }) || optionColors[0] : {
+      COLOR: '#FFFCB5',
+      BORDER_COLOR: '#E8E79D',
+      TEXT_COLOR: '#202428'
+    };
+    var btnStyle = {
+      backgroundColor: colorOption.COLOR,
+      borderColor: colorOption.BORDER_COLOR,
+      color: colorOption.TEXT_COLOR
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _astroClassname.default)('dtable-ui cell-formatter-container button-formatter', containerClassName),
+      style: btnStyle
+    }, button_name);
+  };
+
+  return ButtonFormatter;
+}(_react.default.Component);
+
+ButtonFormatter.propTypes = propTypes;
+var _default = ButtonFormatter;
+exports.default = _default;

package/lib/components/cell-formatter/checkbox-formatter.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  containerClassName: _propTypes.default.string
+};
+
+var CheckboxFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(CheckboxFormatter, _React$PureComponent);
+
+  function CheckboxFormatter() {
+    return _React$PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = CheckboxFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        value = _this$props.value,
+        containerClassName = _this$props.containerClassName;
+    value = value === true ? true : false;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container checkbox-formatter', containerClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "checkbox",
+      type: "checkbox",
+      readOnly: true,
+      checked: value
+    }));
+  };
+
+  return CheckboxFormatter;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(CheckboxFormatter, "defaultProps", {
+  value: false
+});
+CheckboxFormatter.propTypes = propTypes;
+var _default = CheckboxFormatter;
+exports.default = _default;