groundfloor-react-ui 1.2.9 → 1.2.10

package/components/StatusChip/SlimPrimaryStatusChip.js

@@ -1,92 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
-* Primary UI component for user interaction
-*/
-
-const sizes = {
-    xsm: {
-        width: '88px'
-    },
-    sm: {
-        width: '93px'
-    },
-    md: {
-        width: '111px'
-    },
-    lg: {
-        width: '129px'
-    },
-}
-
-const StyledStatusChip = styled.div`
-background: ${({ theme, variant, bgColor }) => bgColor ? bgColor : theme.variant[variant]};
-color: ${({ theme, textColor }) => textColor ? textColor : theme.bgColor};
-border-radius: 13.5px;
-font-size: 14px;
-display: flex;
-align-items: center;
-justify-content: center;
-width: ${({ block, size }) => block ? 'auto' : sizes[size].width};
-height: 28px;
-box-sizing: border-box;
-overflow: hidden;
-`;
-
-export const SlimPrimaryStatusChip = ({ block, style, variant, textColor, bgColor, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-    return (
-        <StyledStatusChip
-            block={block}
-            variant={variant}
-            textColor={textColor}
-            bgColor={bgColor}
-            style={style}
-            {...props}
-        >
-            {props.children}
-        </StyledStatusChip>
-    );
-};
-
-SlimPrimaryStatusChip.propTypes = {
-    /**
-     * background color of SlimStatusChip. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * How wide should the SlimStatusChip be?
-     */
-    size: PropTypes.oneOf(['xsm', 'sm', 'md', 'lg']),
-    /**
-     * Block width of SlimStatusChip
-     */
-    block: PropTypes.bool,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Optional custom text color
-     */
-    textColor: PropTypes.string,
-    /**
-     * Optional custom background color
-     */
-    bgColor: PropTypes.string,
-};
-
-StyledStatusChip.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-SlimPrimaryStatusChip.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-1',
-    block: false,
-    size: 'sm'
-};
-

package/components/StatusChip/SlimSecondaryStatusChip.js

@@ -1,93 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
-* Primary UI component for user interaction
-*/
-
-const sizes = {
-    xsm: {
-        width: '88px'
-    },
-    sm: {
-        width: '93px'
-    },
-    md: {
-        width: '111px'
-    },
-    lg: {
-        width: '129px'
-    },
-}
-
-const StyledStatusChip = styled.div`
-background: ${({ theme }) => theme.bgColor};
-color: ${({ theme, variant, textColor }) => textColor ? textColor : theme.variant[variant]};
-border: 1px solid ${({ theme, variant, borderColor }) => borderColor ? borderColor : theme.variant[variant]};
-border-radius: 13.5px;
-font-size: 14px;
-display: flex;
-align-items: center;
-justify-content: center;
-width: ${({ block, size }) => block ? 'auto' : sizes[size].width};
-height: 27px;
-box-sizing: border-box;
-overflow: hidden;
-`;
-
-export const SlimSecondaryStatusChip = ({ block, style, variant, textColor, borderColor, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-    return (
-        <StyledStatusChip
-            block={block}
-            variant={variant}
-            textColor={textColor}
-            borderColor={borderColor}
-            style={style}
-            {...props}
-        >
-            {props.children}
-        </StyledStatusChip>
-    );
-};
-
-SlimSecondaryStatusChip.propTypes = {
-    /**
-     * Color of SlimStatusChip. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * How wide should the SlimStatusChip be?
-     */
-    size: PropTypes.oneOf(['xsm', 'sm', 'md', 'lg']),
-    /**
-     * Block width of SlimStatusChip
-     */
-    block: PropTypes.bool,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Optional custom text color
-     */
-    textColor: PropTypes.string,
-    /**
-     * Optional custom border color
-     */
-    borderColor: PropTypes.string,
-};
-
-StyledStatusChip.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-SlimSecondaryStatusChip.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-1',
-    block: false,
-    size: 'sm'
-};
-

package/components/StatusChip/index.js

@@ -1,6 +0,0 @@
-export * from './PrimaryStatusChip';
-export * from './SecondaryStatusChip';
-export * from './SlimPrimaryStatusChip';
-export * from './SlimSecondaryStatusChip';
-
-

package/components/StatusCircle/StatusCircle.js

@@ -1,64 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-/**
- * Primary UI component for user interaction
- */
-
-const StyledStatusCircle = styled.div`
-    background: ${({ theme, variant, bgColor }) => bgColor ? bgColor : theme.variant[variant]};
-    border: 1.3px solid ${({ theme, variant, borderColor }) => borderColor ? borderColor : theme.variant[variant]};
-    border-radius: 50%;
-    width: ${({ size }) => size}px;
-    height: ${({ size }) => size}px;
-    box-sizing: border-box;
-`;
-
-export const StatusCircle = ({ variant, bgColor, borderColor, ...props }) => {
-    const theme = useTheme() || defaultThemeColor;
-    return (
-        <StyledStatusCircle
-            variant={variant}
-            borderColor={borderColor}
-            bgColor={bgColor}
-            {...props}
-        >
-        </StyledStatusCircle>
-    );
-};
-
-StatusCircle.propTypes = {
-    /**
-     * Color of StatusCircle base on the available one among variant theme. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-    /**
-     * Size of the circle
-     */
-    size: PropTypes.number,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-    /**
-     * Optional custom border color
-     */
-    borderColor: PropTypes.string,
-    /**
-     * Optional custom background color
-     */
-    bgColor: PropTypes.string,
-};
-
-StyledStatusCircle.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-StatusCircle.defaultProps = {
-    theme: defaultThemeColor,
-    variant: 'primary-1',
-    size: 11
-};
-

package/components/StatusCircle/index.js

@@ -1 +0,0 @@
-export * from './StatusCircle';

package/components/Tables/Table.js

@@ -1,178 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import DataTable from 'react-data-table-component';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import { Icon } from '../Icon';
-
-/**
- * Primary UI component for user interaction
- */
-
-const WrapperDiv = styled.div`
-  .form-check-input {
-    accent-color: ${({ theme }) => theme.primary['primary-1']};
-  }
-`;
-
-export const Table = ({
-    customStyles,
-    inBuiltCss,
-    type = 'table',
-    sortIcon,
-    data,
-    tableColumns,
-    progressPending,
-    defaultSortFieldId,
-    handleOnSort,
-    sortServer,
-    progressComponent,
-    responsive,
-    conditionalRowStyles,
-    fixedHeader,
-    fixedHeaderScrollHeight,
-    checkboxColor,
-    ...props
-}) => {
-    let tableStyle = {};
-
-    if (inBuiltCss) {
-        if (inBuiltCss[type]) {
-            tableStyle = inBuiltCss[type];
-        }
-    }
-
-    if (customStyles) {
-        for (const property in customStyles) {
-            tableStyle[property] = customStyles[property];
-        }
-    }
-
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) => {
-        return (
-            <WrapperDiv theme={activeTheme}>
-                <input
-                    type='checkbox'
-                    className='form-check-input'
-                    ref={ref}
-                    onClick={onClick}
-                    {...rest}
-                />
-            </WrapperDiv>
-        );
-    });
-
-    return (
-        <DataTable
-            responsive={responsive}
-            data={data}
-            columns={tableColumns}
-            noHeader={true}
-            highlightOnHover
-            sortIcon={sortIcon}
-            progressPending={progressPending}
-            customStyles={tableStyle}
-            defaultSortFieldId={defaultSortFieldId}
-            progressComponent={progressComponent ? progressComponent : undefined}
-            sortServer={sortServer}
-            onSort={(columnInfo, direction, event) => {
-                handleOnSort(columnInfo, direction, event);
-            }}
-            conditionalRowStyles={conditionalRowStyles}
-            fixedHeader={fixedHeader}
-            fixedHeaderScrollHeight={fixedHeaderScrollHeight}
-            selectableRowsComponent={Checkbox}
-            {...props}
-        />
-    );
-};
-
-Table.propTypes = {
-    /**
-     * inBuiltCss object
-     */
-    inBuiltCss: PropTypes.object,
-    /**
-     * Optional component to override the default sorting icon (must be downward)
-     */
-    sortIcon: PropTypes.any,
-    /**
-     * Data array of the actual data to display.
-     */
-    data: PropTypes.array,
-    /**
-     * Data array of the columns to display.
-     */
-    tableColumns: PropTypes.array,
-    /**
-     * Optional display a message while data are loading
-     */
-    progressPending: PropTypes.bool,
-    /**
-     * Custom component to display while data are loading
-     */
-    progressComponent: PropTypes.any,
-    /**
-     * Optional to set a column to be pre-sorted
-     */
-    defaultSortFieldId: PropTypes.number,
-    /**
-     * Optional disables internal sorting for use with server-side/remote sorting
-     */
-    sortServer: PropTypes.bool,
-    /**
-     * Optional function that is triggered when a column is sort
-     */
-    handleOnSort: PropTypes.any,
-    /**
-     * Optional makes the table horizontally scrollable on smaller screen widths
-     */
-    responsive: PropTypes.bool,
-    /**
-     * Optional array of objects that allow apply conditional style base on data value
-     */
-    conditionalRowStyles: PropTypes.array,
-    /**
-     * Optional makes the table header fixed allowing you to scroll the table body
-     */
-    fixedHeader: PropTypes.bool,
-    /**
-     * Optional to set height of the table
-     */
-    fixedHeaderScrollHeight: PropTypes.string,
-    /**
-     * Optional to override style of the table
-     * Default style:
-     * https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts
-     */
-    customStyle: PropTypes.object,
-};
-
-Table.defaultProps = {
-    inBuiltCss: defaultStyles,
-    sortIcon: (
-        <Icon
-            icon={'arrow-down'}
-            size={11}
-            color={'#333333'}
-            style={{
-                transform: 'scaleX(0.7) scaleY(0.7) translate(5px, -3px)',
-            }}
-        />
-    ),
-    data: [],
-    tableColumns: [],
-    progressPending: false,
-    defaultSortFieldId: null,
-    handleOnSort: (columnInfo, direction, event) => {
-        console.log(columnInfo, direction, event);
-    },
-    sortServer: null,
-    progressComponent: undefined,
-    responsive: true,
-    fixedHeader: true,
-    fixedHeaderScrollHeight: '100vh',
-};

package/components/Tables/index.js

@@ -1 +0,0 @@
-export * from './Table';