office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
169 lines • 7.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var colors_1 = require("../../utilities/color/colors");
var Grid_1 = require("../../utilities/grid/Grid");
var GridCell_1 = require("../../utilities/grid/GridCell");
var stylesImport = require("./SwatchColorPicker.scss");
var styles = stylesImport;
var ColorPickerGridCell = (function (_super) {
tslib_1.__extends(ColorPickerGridCell, _super);
function ColorPickerGridCell() {
return _super !== null && _super.apply(this, arguments) || this;
}
return ColorPickerGridCell;
}(GridCell_1.GridCell));
var SwatchColorPicker = (function (_super) {
tslib_1.__extends(SwatchColorPicker, _super);
function SwatchColorPicker(props) {
var _this = _super.call(this, props) || this;
_this._id = props.id || Utilities_1.getId('swatchColorPicker');
var selectedIndex;
if (props.selectedId) {
selectedIndex = _this._getSelectedIndex(props.colorCells, props.selectedId);
}
_this.state = {
selectedIndex: selectedIndex
};
return _this;
}
SwatchColorPicker.prototype.componentWillReceiveProps = function (newProps) {
var newSelectedIndex;
if (newProps.selectedId) {
newSelectedIndex = this._getSelectedIndex(newProps.colorCells, newProps.selectedId);
}
if (newSelectedIndex !== this.state.selectedIndex) {
this.setState({
selectedIndex: newSelectedIndex
});
}
};
SwatchColorPicker.prototype.render = function () {
var _a = this.props, colorCells = _a.colorCells, positionInSet = _a.positionInSet, setSize = _a.setSize, shouldFocusCircularNavigate = _a.shouldFocusCircularNavigate, className = _a.className;
return (React.createElement(Grid_1.Grid, { key: this._id + colorCells[0].id + '-grid', items: colorCells.map(function (item, index) { return tslib_1.__assign({}, item, { index: index }); }), columnCount: this.props.columnCount, onRenderItem: this._renderOption, positionInSet: positionInSet && positionInSet, setSize: setSize && setSize, shouldFocusCircularNavigate: shouldFocusCircularNavigate, onBlur: this._onSwatchColorPickerBlur, containerClassName: Utilities_1.css('ms-swatchColorPickerBodyContainer', styles.swatchColorPickerContainer, className) }));
};
/**
* When the whole swatchColorPicker is blurred,
* make sure to clear the pending focused stated
*/
SwatchColorPicker.prototype._onSwatchColorPickerBlur = function () {
if (this.props.onCellFocused) {
this.props.onCellFocused();
}
};
/**
* Get the selected item's index
* @param items - The items to search
* @param selectedId - The selected item's id to find
* @returns {number} - The index of the selected item's id, -1 if there was no match
*/
SwatchColorPicker.prototype._getSelectedIndex = function (items, selectedId) {
var selectedIndex = Utilities_1.findIndex(items, (function (item) { return (item.id === selectedId); }));
return selectedIndex >= 0 ? selectedIndex : undefined;
};
/**
* Render a color cell
* @param item - The item to render
* @returns {JSX.Element} - Element representing the item
*/
SwatchColorPicker.prototype._renderOption = function (item) {
var id = this._id;
return (React.createElement(ColorPickerGridCell, { item: item, id: id, key: id + item.id, disabled: this.props.disabled, className: styles.cell, onClick: this._onCellClick, onHover: this._onGridCellHovered, onFocus: this._onGridCellFocused, onRenderItem: this._onRenderColorOption, role: 'gridcell', selected: this.state.selectedIndex !== undefined && (this.state.selectedIndex === item.index), cellIsSelectedStyle: ['is-selected ' + styles.cellIsSelected], cellDisabledStyle: ['is-disabled ' + styles.disabled], label: item.label }));
};
/**
* Callback passed to the GridCell class that will trigger the onCellHovered callback of the SwatchColorPicker
*/
SwatchColorPicker.prototype._onGridCellHovered = function (item) {
if (this.props && this.props.onCellHovered) {
if (item) {
this.props.onCellHovered(item.id, item.color);
}
else {
this.props.onCellHovered();
}
}
};
/**
* Callback passed to the GridCell class that will trigger the onCellFocus callback of the SwatchColorPicker
*/
SwatchColorPicker.prototype._onGridCellFocused = function (item) {
if (this.props && this.props.onCellFocused) {
if (item) {
this.props.onCellFocused(item.id, item.color);
}
else {
this.props.onCellFocused();
}
}
};
/**
* Render the core of a color cell
* @returns {JSX.Element} - Element representing the core of the item
*/
SwatchColorPicker.prototype._onRenderColorOption = function (colorOption) {
// Build an SVG for the cell with the given shape and color properties
return (React.createElement("svg", { className: Utilities_1.css(styles.svg, this.props.cellShape, this.props.cellShape === 'circle' ? styles.circle : ''), viewBox: '0 0 20 20', fill: colors_1.getColorFromString(colorOption.color).str }, this.props.cellShape === 'circle' ?
React.createElement("circle", { cx: '50%', cy: '50%', r: '50%' }) :
React.createElement("rect", { width: '100%', height: '100%' })));
};
/**
* Handle the click on a cell
* @param item - The cell that the click was fired against
*/
SwatchColorPicker.prototype._onCellClick = function (item) {
if (this.props.disabled) {
return;
}
var index = item.index;
// If we have a valid index and it is not already
// selected, select it
if (index >= 0 && index !== this.state.selectedIndex) {
if (this.props.onColorChanged) {
this.props.onColorChanged(item.id, item.color);
}
this.setState({
selectedIndex: index
});
}
};
/**
* Clear the colors by calling the given callbacks
* @param callbacks - The callbacks to handle the clear operation
*/
// tsline:disable-next-line:no-unused-variable
SwatchColorPicker.prototype._clearColors = function (callbacks) {
callbacks.forEach(function (callback) {
if (callback) {
callback();
}
});
};
SwatchColorPicker.defaultProps = {
cellShape: 'circle',
disabled: false,
shouldFocusCircularNavigate: true
};
tslib_1.__decorate([
Utilities_1.autobind
], SwatchColorPicker.prototype, "_onSwatchColorPickerBlur", null);
tslib_1.__decorate([
Utilities_1.autobind
], SwatchColorPicker.prototype, "_renderOption", null);
tslib_1.__decorate([
Utilities_1.autobind
], SwatchColorPicker.prototype, "_onGridCellHovered", null);
tslib_1.__decorate([
Utilities_1.autobind
], SwatchColorPicker.prototype, "_onGridCellFocused", null);
tslib_1.__decorate([
Utilities_1.autobind
], SwatchColorPicker.prototype, "_onRenderColorOption", null);
tslib_1.__decorate([
Utilities_1.autobind
], SwatchColorPicker.prototype, "_onCellClick", null);
return SwatchColorPicker;
}(Utilities_1.BaseComponent));
exports.SwatchColorPicker = SwatchColorPicker;
//# sourceMappingURL=SwatchColorPicker.js.map