imbric-theme 0.1.7 → 0.1.8

package/atoms/AlertModal/AlertModal.js

@@ -58,8 +58,8 @@ AlertModal.defaultProps = {
   getStyles: () => { },
   onConfirm: () => { },
   // onDismiss: () => {}, // Not default for use onConfirm if is undefined
-  titleAlert: 'Felicidades!',
-  subTitleAlert: 'Todo ha ido correctamente',
+  titleAlert: '',
+  subTitleAlert: '',
   txtBtnAlert: 'Ok',
   txtBtnAlertCancel: 'Cancelar',
   iconAlert: 'success',

package/molecules/ColumnTable/ColumnTable.js

@@ -104,7 +104,7 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
                       isInline
                       // onChange={item => useStateDate([item.selection])}
                       onChange={item => { onChangeSelect(item, props.idInput) }}
-                      optionsSelect={opSelect}
+                      optionsSelect={opSelect || props.optionsSelect}
                       placeholder={props.placeholder}
                       maxMenuHeight={110}
                     />

package/molecules/DynamicSelect/DynamicSelect.js

@@ -1,9 +1,42 @@
+// import React from 'react'
 import React from 'react'
-import Select from 'react-select'
+// import Select from 'react-select'
 import PropTypes from 'prop-types'
 import styles from './DynamicSelect.module.css'
 import withStyles from '../../hocs/withStyles'
 
+import Select, { components } from 'react-select'
+
+import {
+  SortableContainer,
+  SortableElement,
+  sortableHandle
+} from 'react-sortable-hoc'
+
+const SortableMultiValue = SortableElement((props) => {
+  // this prevents the menu from being opened/closed when the user clicks
+  // on a value to begin dragging it. ideally, detecting a click (instead of
+  // a drag) would still focus the control and toggle the menu, but that
+  // requires some magic with refs that are out of scope for this example
+  const onMouseDown = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  // const onMouseUp = (e) => {
+  //   e.target.remove()
+  // }
+
+  const innerProps = { ...props.innerProps, onMouseDown };
+  return <components.MultiValue {...props} innerProps={innerProps} />
+})
+
+const SortableMultiValueLabel = sortableHandle((props) => (
+  <components.MultiValueLabel {...props} innerProps={props.innerProps} />
+))
+
+const SortableSelect = SortableContainer(Select)
+
 
 export const DynamicSelect = ({
   getStyles,
@@ -24,6 +57,10 @@ export const DynamicSelect = ({
   closeMenuOnSelect,
   maxMenuHeight,
   instanceId,
+  sortableMultiSelect,
+  onSortEnd,
+  formatGroupLabel,
+  hideSelectedOptions,
 }) => {
 
 
@@ -94,6 +131,21 @@ export const DynamicSelect = ({
       minWidth: "100%",
     }),
 
+    multiValue: (base) => ({
+      ...base,
+      color: "hsl(0deg 100% 50%)",
+      zIndex: "40",
+      // width: "max-content",
+      // minWidth: "100%",
+    }),
+
+    MultiValueGeneric: (base) => ({
+      ...base,
+      color: "hsl(0deg 100% 50%)",
+      // width: "max-content",
+      // minWidth: "100%",
+    }),
+
     // menu: styles => ({ ...styles,                 
     //   width: '500px'
     //  })  
@@ -105,43 +157,76 @@ export const DynamicSelect = ({
 
   }
 
-  // const handleChange = (value) => {
-  //   console.group('Value Changed');
-  //   console.log(value);
-  //   // console.log(`action: ${actionMeta.action}`);
-  //   console.groupEnd();
-  // };
 
   return (
 
     <div className={getStyles('dynamic-select', {
       'is-inline': isInline,
     })}>
-      <Select
-        name="basic"
-        // className="basic-single"
-        // classNamePrefix="select"
-        placeholder={placeholder}
-        styles={customStyles}
-        options={optionsSelect}
-        defaultValue={defaultValue}
-        value={value}
-        isMulti={isMulti}
-        isClearable={isClearable}
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        isRtl={isRtl}
-        isSearchable={isSearchable}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        closeMenuOnSelect={closeMenuOnSelect}
-        maxMenuHeight={maxMenuHeight}
-        autosize={true}
-        instanceId={instanceId}
-        menuPlacement='auto'
-        menuPosition='fixed'
-      />
+
+
+      {sortableMultiSelect ?
+        <SortableSelect
+          useDragHandle
+          // react-sortable-hoc props:
+          axis="xy"
+          onSortEnd={onSortEnd}
+          distance={4}
+          // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
+          getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+          // react-select props:
+          styles={customStyles}
+          placeholder={placeholder}
+          isMulti={isMulti}
+          options={optionsSelect}
+          defaultValue={defaultValue}
+          value={value}
+          onChange={onChange}
+          components={{
+            MultiValue: SortableMultiValue,
+            MultiValueLabel: SortableMultiValueLabel
+          }}
+          isClearable={isClearable}
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          closeMenuOnSelect={false}
+          autosize={true}
+          instanceId={instanceId}
+          menuPlacement='auto'
+          menuPosition='fixed'
+          formatGroupLabel={formatGroupLabel}
+          hideSelectedOptions={hideSelectedOptions}
+        />
+        :
+        <Select
+          name="basic"
+          // className="basic-single"
+          // classNamePrefix="select"
+          placeholder={placeholder}
+          styles={customStyles}
+          options={optionsSelect}
+          defaultValue={defaultValue}
+          value={value}
+          isMulti={isMulti}
+          isClearable={isClearable}
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          isRtl={isRtl}
+          isSearchable={isSearchable}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          closeMenuOnSelect={closeMenuOnSelect}
+          maxMenuHeight={maxMenuHeight}
+          autosize={true}
+          instanceId={instanceId}
+          menuPlacement='auto'
+          menuPosition='fixed'
+          formatGroupLabel={formatGroupLabel}
+          hideSelectedOptions={hideSelectedOptions}
+        />}
+
+
     </div>
 
   )
@@ -165,6 +250,8 @@ DynamicSelect.propTypes = {
   closeMenuOnSelect: PropTypes.bool,
   maxMenuHeight: PropTypes.number,
   instanceId: PropTypes.string,
+  sortableMultiSelect: PropTypes.bool,
+  hideSelectedOptions: PropTypes.bool,
 }
 
 DynamicSelect.defaultProps = {
@@ -182,7 +269,9 @@ DynamicSelect.defaultProps = {
   onBlur: () => { },
   closeMenuOnSelect: true,
   maxMenuHeight: 300,
-  instanceId: ''
+  instanceId: '',
+  sortableMultiSelect: false,
+  hideSelectedOptions: true,
 }
 
 export default withStyles(styles)(DynamicSelect)

package/molecules/RowTable/RowTable.js

@@ -21,6 +21,7 @@ export const RowTable = ({
   isClickRow,
   onClickRow,
   onClickActionUserView,
+  onClickActionFileDownload,
   onClickActionListInvoice,
   onClickActionListXLS,
   onClickActionListCSV,
@@ -32,6 +33,7 @@ export const RowTable = ({
   onClickActionClone,
   onClickActionCheckbox,
   txtTootipIconUserView,
+  txtTootipIconFileDownload,
   txtTootipIconListInvoice,
   txtTootipIconListListXLS,
   txtTootipIconListListCSV,
@@ -800,6 +802,72 @@ export const RowTable = ({
                                 : null}
 
 
+                              {itemTd.viewFileDownload ?
+
+                                item.viewFileDownload === undefined ?
+
+                                  <>
+                                    <span
+                                      data-tip
+                                      data-for='fileDownload'
+                                      onMouseEnter={handleMouseEnter}
+                                      onMouseLeave={handleMouseLeave}
+                                    >
+                                      <>
+                                        <Icon
+                                          id="fileDownload"
+                                          background="base"
+                                          name="fileDownload"
+                                          onClick={(e) => { onClickActionFileDownload(e, item) }}
+                                        />
+                                        <Horizontal size="xs" />
+                                      </>
+
+                                    </span>
+
+                                    {isToolTipMounted ? (
+                                      <ReactTooltip id='fileDownload' type='error'>
+                                        <span>{txtTootipIconFileDownload}</span>
+                                      </ReactTooltip>
+                                    ) : null}
+                                  </>
+
+                                  :
+
+                                  item.viewFileDownload ?
+
+                                    <>
+                                      <span
+                                        data-tip
+                                        data-for='fileDownload'
+                                        onMouseEnter={handleMouseEnter}
+                                        onMouseLeave={handleMouseLeave}
+                                      >
+                                        <>
+                                          <Icon
+                                            id="fileDownload"
+                                            background="base"
+                                            name="fileDownload"
+                                            onClick={(e) => { onClickActionFileDownload(e, item) }}
+                                          />
+                                          <Horizontal size="xs" />
+                                        </>
+
+                                      </span>
+
+                                      {isToolTipMounted ? (
+                                        <ReactTooltip id='fileDownload' type='error'>
+                                          <span>{txtTootipIconFileDownload}</span>
+                                        </ReactTooltip>
+                                      ) : null}
+                                    </>
+
+                                    : null
+
+                                : null}
+
+
+
 
                               {itemTd.viewCheckbox ?
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -60,7 +60,8 @@
     "react-moment": "1.1.2",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
-    "react-select": "5.3.2",
+    "react-select": "5.8.0",
+    "react-sortable-hoc": "2.0.0",
     "react-spinners": "0.13.4",
     "react-tooltip": "4.4.0",
     "storybook-addon-theme-changer": "0.1.2",