apeman-react-list
Version:
apeman react package for list component.
1,693 lines (1,350 loc) • 2.5 MB
JavaScript
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/doc/demo/demo.component.jsx":[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _ap_list = require('../../lib/ap_list');
var _ap_list2 = _interopRequireDefault(_ap_list);
var _ap_list_style = require('../../lib/ap_list_style');
var _ap_list_style2 = _interopRequireDefault(_ap_list_style);
var _ap_list_body = require('../../lib/ap_list_body');
var _ap_list_body2 = _interopRequireDefault(_ap_list_body);
var _ap_list_header = require('../../lib/ap_list_header');
var _ap_list_header2 = _interopRequireDefault(_ap_list_header);
var _ap_list_footer = require('../../lib/ap_list_footer');
var _ap_list_footer2 = _interopRequireDefault(_ap_list_footer);
var _ap_list_item = require('../../lib/ap_list_item');
var _ap_list_item2 = _interopRequireDefault(_ap_list_item);
var _ap_list_item_icon = require('../../lib/ap_list_item_icon');
var _ap_list_item_icon2 = _interopRequireDefault(_ap_list_item_icon);
var _ap_list_item_text = require('../../lib/ap_list_item_text');
var _ap_list_item_text2 = _interopRequireDefault(_ap_list_item_text);
var _ap_list_item_arrow_icon = require('../../lib/ap_list_item_arrow_icon');
var _ap_list_item_arrow_icon2 = _interopRequireDefault(_ap_list_item_arrow_icon);
var _ap_list_more_button = require('../../lib/ap_list_more_button');
var _ap_list_more_button2 = _interopRequireDefault(_ap_list_more_button);
var _ap_list_bar = require('../../lib/ap_list_bar');
var _ap_list_bar2 = _interopRequireDefault(_ap_list_bar);
var _ap_list_bar_message = require('../../lib/ap_list_bar_message');
var _ap_list_bar_message2 = _interopRequireDefault(_ap_list_bar_message);
var _apemanReactSpinner = require('apeman-react-spinner');
var _apemanReactForm = require('apeman-react-form');
var _apemanReactSearch = require('apeman-react-search');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Demo = _react2.default.createClass({
displayName: 'Demo',
getInitialState: function getInitialState() {
return {
spinning: false
};
},
render: function render() {
var s = this;
var state = s.state;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
null,
_react2.default.createElement(_ap_list_style2.default, { highlightColor: '#b35600' }),
_react2.default.createElement(_apemanReactSpinner.ApSpinnerStyle, { highlightColor: '#b35600' }),
_react2.default.createElement(_apemanReactForm.ApFormStyle, { highlightColor: '#b35600' }),
_react2.default.createElement(_apemanReactSearch.ApSearchStyle, { highlightColor: '#b35600' }),
_react2.default.createElement(_apemanReactSearch.ApSearch, { highlightColor: '#b35600' }),
_react2.default.createElement(
'h3',
null,
'Disclosure List'
),
_react2.default.createElement(
_ap_list2.default,
null,
_react2.default.createElement(
_ap_list_item2.default,
{ onTap: function onTap(e) {
s.handleTap(e, 'disclosure 01');
},
data: { id: 1 },
disclosure: true },
_react2.default.createElement(
_ap_list_item_text2.default,
null,
'Item 01'
)
),
_react2.default.createElement(
_ap_list_item2.default,
{ onTap: function onTap(e) {
s.handleTap(e, 'disclosure 02');
},
data: { id: 2 },
disclosure: true },
_react2.default.createElement(
_ap_list_item_text2.default,
null,
_react2.default.createElement(
'b',
null,
'Item 02'
)
)
),
_react2.default.createElement(_ap_list_item2.default, { onTap: function onTap(e) {
s.handleTap(e, 'disclosure 03');
},
data: { id: 3 },
disclosure: true,
title: 'Item 03',
subTitle: 'Sub item 03'
})
)
),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h3',
null,
'Image List'
)
),
_react2.default.createElement(
_ap_list2.default,
{ spinning: state.spinning },
_react2.default.createElement(
_ap_list_item2.default,
{ imgSrc: './images/04.jpg' },
_react2.default.createElement(
_ap_list_item_text2.default,
null,
'Item 03'
)
),
_react2.default.createElement(
_ap_list_item2.default,
{ imgSrc: './images/05.jpg' },
_react2.default.createElement(
_ap_list_item_text2.default,
null,
_react2.default.createElement(
'b',
null,
'Item 04'
)
)
),
_react2.default.createElement(_ap_list_item2.default, { imgSrc: './images/05.jpg',
title: 'Item 05',
subTitle: 'Item 06' })
),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h3',
null,
'Paging List'
)
),
_react2.default.createElement(
_ap_list2.default,
null,
_react2.default.createElement(
_ap_list_bar2.default,
null,
_react2.default.createElement(
_ap_list_bar_message2.default,
null,
'This is list bar'
),
_react2.default.createElement(
_apemanReactForm.ApForm,
null,
_react2.default.createElement(_apemanReactSearch.ApSearch, { righted: true })
)
),
_react2.default.createElement(
_ap_list_header2.default,
null,
'This is the header'
),
_react2.default.createElement(
_ap_list_body2.default,
null,
_react2.default.createElement(_ap_list_item2.default, { onTap: function onTap(e) {
s.handleTap(e, 'page list');
},
disclosure: true,
title: 'Item 01' })
),
_react2.default.createElement(
_ap_list_footer2.default,
{ spinning: state.spinning },
_react2.default.createElement(_ap_list_more_button2.default, { enabled: true,
onTap: function onTap(e) {
s.handleTap(e, 'paging list');
} })
)
),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h3',
null,
'Empty List'
)
),
_react2.default.createElement(
_ap_list2.default,
{ minHeight: 64,
empty: true,
alt: 'Oops! No data available.' },
_react2.default.createElement(
_ap_list_bar2.default,
null,
_react2.default.createElement(
_ap_list_bar_message2.default,
null,
'This is list bar'
),
_react2.default.createElement(
_apemanReactForm.ApForm,
null,
_react2.default.createElement(_apemanReactSearch.ApSearch, { righted: true })
)
)
)
);
},
handleTap: function handleTap(ev, name) {
console.log('Tapped: ', name, ev.data);
var s = this;
s.setState({ spinning: true });
setTimeout(function () {
s.setState({ spinning: false });
}, 1200);
}
});
exports.default = Demo;
},{"../../lib/ap_list":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list.jsx","../../lib/ap_list_bar":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_bar.jsx","../../lib/ap_list_bar_message":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_bar_message.jsx","../../lib/ap_list_body":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_body.jsx","../../lib/ap_list_footer":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_footer.jsx","../../lib/ap_list_header":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_header.jsx","../../lib/ap_list_item":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item.jsx","../../lib/ap_list_item_arrow_icon":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_arrow_icon.jsx","../../lib/ap_list_item_icon":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_icon.jsx","../../lib/ap_list_item_text":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_text.jsx","../../lib/ap_list_more_button":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_more_button.jsx","../../lib/ap_list_style":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_style.jsx","apeman-react-form":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-form/shim/node/index.js","apeman-react-search":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-search/lib/index.js","apeman-react-spinner":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-spinner/lib/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/doc/demo/demo.entrypoint.jsx":[function(require,module,exports){
'use strict';
var _breact = require('breact');
var _demoComponent = require('./demo.component.jsx');
var _demoComponent2 = _interopRequireDefault(_demoComponent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(0, _breact.once)('DOMContentLoaded', function () {
var element = (0, _breact.create)(_demoComponent2.default, {});
(0, _breact.mount)('demo-wrap', element).then(function () {
console.debug('Demo component mounted.');
});
});
},{"./demo.component.jsx":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/doc/demo/demo.component.jsx","breact":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/breact/shim/browser/index.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list.jsx":[function(require,module,exports){
/**
* List component.
* @class ApList
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactSpinner = require('apeman-react-spinner');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApList */
var ApList = _react2.default.createClass({
displayName: 'ApList',
// --------------------
// Specs
// --------------------
propTypes: {
/** Shows spin */
spinning: _react.PropTypes.bool,
/** Theme of spinner */
spinner: _react.PropTypes.string,
/** Min height of list */
minHeight: _react.PropTypes.number,
/** Mark as empty */
empty: _react.PropTypes.bool,
/** Alt text to show when empty */
alt: _react.PropTypes.string
},
mixins: [],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {
spinning: false,
spinner: _apemanReactSpinner.ApSpinner.DEFAULT_THEME,
minHeight: null,
empty: false,
alt: 'Not data found'
};
},
render: function render() {
var s = this;
var props = s.props;
return _react2.default.createElement(
'ul',
{ className: (0, _classnames2.default)('ap-list', {
'ap-list-empty': !!props.empty
}, props.className),
style: Object.assign({
minHeight: props.minHeight
}, props.style) },
_react2.default.createElement(_apemanReactSpinner.ApSpinner, { enabled: props.spinning,
className: 'ap-list-spinner'
}),
props.children,
props.empty ? s._renderAlt(props.alt) : null
);
},
// --------------------
// Lifecycle
// --------------------
// ------------------
// Custom
// ------------------
// ------------------
// Private
// ------------------
_renderAlt: function _renderAlt(text) {
return _react2.default.createElement(
'div',
{ className: 'ap-list-alt' },
text
);
}
});
exports.default = ApList;
},{"apeman-react-spinner":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-spinner/lib/index.js","classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_bar.jsx":[function(require,module,exports){
/**
* List bar component.
* @class ApListBar
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListBar */
var ApListBar = _react2.default.createClass({
displayName: 'ApListBar',
// --------------------
// Specs
// --------------------
render: function render() {
var s = this;
var state = s.state;
var props = s.props;
return _react2.default.createElement(
'div',
{ className: (0, _classnames2.default)('ap-list-bar', props.className),
style: Object.assign({}, props.style) },
props.children
);
}
// --------------------
// Lifecycle
// --------------------
// ------------------
// Custom
// ------------------
// ------------------
// Private
// ------------------
});
exports.default = ApListBar;
},{"classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_bar_message.jsx":[function(require,module,exports){
/**
* List bar message component.
* @class ApListBarMessage
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListBarMessage */
var ApListBarMessage = _react2.default.createClass({
displayName: 'ApListBarMessage',
// --------------------
// Specs
// --------------------
render: function render() {
var s = this;
var state = s.state;
var props = s.props;
return _react2.default.createElement(
'span',
{ className: (0, _classnames2.default)('ap-list-bar-message', props.className),
style: Object.assign({}, props.style) },
props.children
);
}
// --------------------
// Lifecycle
// --------------------
// ------------------
// Custom
// ------------------
// ------------------
// Private
// ------------------
});
exports.default = ApListBarMessage;
},{"classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_body.jsx":[function(require,module,exports){
/**
* List body component.
* @class ApListBody
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListBody */
var ApListBody = _react2.default.createClass({
displayName: 'ApListBody',
// --------------------
// Specs
// --------------------
propTypes: {},
mixins: [],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {};
},
render: function render() {
var s = this;
var state = s.state;
var props = s.props;
return _react2.default.createElement(
'div',
{ className: (0, _classnames2.default)('ap-list-body', props.className),
style: Object.assign({}, props.style) },
props.children
);
}
// --------------------
// Lifecycle
// --------------------
// ------------------
// Custom
// ------------------
// ------------------
// Private
// ------------------
});
exports.default = ApListBody;
},{"classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_footer.jsx":[function(require,module,exports){
/**
* List footer component.
* @class ApListFooter
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactSpinner = require('apeman-react-spinner');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListFooter */
var ApListFooter = _react2.default.createClass({
displayName: 'ApListFooter',
// --------------------
// Specs
// --------------------
propTypes: {
/** Show spinner */
spinning: _react.PropTypes.bool,
/** Spinner theme */
spinner: _react.PropTypes.string
},
mixins: [],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {
spinning: false,
spinner: _apemanReactSpinner.ApSpinner.DEFAULT_THEME
};
},
render: function render() {
var s = this;
var state = s.state;
var props = s.props;
return _react2.default.createElement(
'div',
{ className: (0, _classnames2.default)('ap-list-footer', props.className),
style: Object.assign({}, props.style) },
_react2.default.createElement(_apemanReactSpinner.ApSpinner, { enabled: props.spinning,
className: 'ap-list-footer-spinner'
}),
props.children
);
}
// --------------------
// Lifecycle
// --------------------
// ------------------
// Custom
// ------------------
// ------------------
// Private
// ------------------
});
exports.default = ApListFooter;
},{"apeman-react-spinner":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-spinner/lib/index.js","classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_header.jsx":[function(require,module,exports){
/**
* List header component.
* @class ApListHeader
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListHeader */
var ApListHeader = _react2.default.createClass({
displayName: 'ApListHeader',
// --------------------
// Specs
// --------------------
propTypes: {},
mixins: [],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {};
},
render: function render() {
var s = this;
var state = s.state;
var props = s.props;
return _react2.default.createElement(
'div',
{ className: (0, _classnames2.default)('ap-list-header', props.className),
style: Object.assign({}, props.style) },
props.children
);
}
// --------------------
// Lifecycle
// --------------------
// ------------------
// Custom
// ------------------
// ------------------
// Private
// ------------------
});
exports.default = ApListHeader;
},{"classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item.jsx":[function(require,module,exports){
/**
* List item component.
* @class ApListItem
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactMixinTouch = require('apeman-react-mixin-touch');
var _ap_list_item_image = require('./ap_list_item_image');
var _ap_list_item_image2 = _interopRequireDefault(_ap_list_item_image);
var _ap_list_item_text = require('./ap_list_item_text');
var _ap_list_item_text2 = _interopRequireDefault(_ap_list_item_text);
var _ap_list_item_arrow_icon = require('./ap_list_item_arrow_icon');
var _ap_list_item_arrow_icon2 = _interopRequireDefault(_ap_list_item_arrow_icon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListItem */
var ApListItem = _react2.default.createClass({
displayName: 'ApListItem',
// --------------------
// Specs
// --------------------
propTypes: {
disclosure: _react.PropTypes.bool,
imgSrc: _react.PropTypes.string,
imgAlt: _react.PropTypes.string,
imgWidth: _react.PropTypes.number,
/** Titlte of item */
title: _react.PropTypes.string,
/** Sub titlte of item */
subTitle: _react.PropTypes.string,
/** Item height */
height: _react.PropTypes.number,
/** Data for events */
data: _react.PropTypes.object
},
mixins: [_apemanReactMixinTouch.ApTouchMixin],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {
disclosure: false,
imgSrc: null,
imgAlt: null,
imgWidth: 72,
title: null,
subTitle: null,
height: 48,
data: null
};
},
render: function render() {
var s = this;
var props = s.props;
var tappable = !!props.onTap;
var height = props.height;
var className = (0, _classnames2.default)('ap-list-item', props.className, {
'ap-list-item-tappable': tappable
});
var style = Object.assign({
height: height + 'px',
lineHeight: height + 'px'
}, props.style);
return _react2.default.createElement(
'li',
{ className: className,
style: style },
_react2.default.createElement(
'div',
{ className: 'ap-list-item-inner' },
_react2.default.createElement(
'span',
{ className: 'ap-list-item-aligner' },
' '
),
s._renderImage(props.imgSrc, props.imgAlt, props.imgWidth),
s._renderTitle(props.title, props.subTitle),
props.children,
s._renderDisclosureIcon(props.disclosure)
)
);
},
// --------------------
// For ApTouchMixin
// --------------------
getTouchData: function getTouchData() {
var s = this;
var props = s.props;
return props.data;
},
// --------------------
// Private
// --------------------
_renderDisclosureIcon: function _renderDisclosureIcon(disclosure) {
var s = this;
var props = s.props;
if (!disclosure) {
return null;
}
var style = {
lineHeight: props.height + 'px'
};
return _react2.default.createElement(_ap_list_item_arrow_icon2.default, { className: 'ap-list-item-disclosure-icon',
style: style });
},
_renderImage: function _renderImage(imgSrc, imgAlt, imgWidth) {
var s = this;
var props = s.props;
if (imgSrc === null) {
return null;
}
return _react2.default.createElement(_ap_list_item_image2.default, { className: 'ap-list-item-sumbnail-image',
src: imgSrc,
alt: imgAlt,
height: props.height,
width: imgWidth });
},
_renderTitle: function _renderTitle(title, subTitle) {
var s = this;
var props = s.props;
if (title === null) {
return;
}
return _react2.default.createElement(
_ap_list_item_text2.default,
{ className: 'ap-list-item-title-wrap' },
_react2.default.createElement(
'span',
{ className: 'ap-list-item-title' },
title
),
_react2.default.createElement(
'span',
{ className: 'ap-list-item-sub-title' },
subTitle
)
);
}
});
exports.default = ApListItem;
},{"./ap_list_item_arrow_icon":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_arrow_icon.jsx","./ap_list_item_image":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_image.jsx","./ap_list_item_text":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_text.jsx","apeman-react-mixin-touch":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-mixin-touch/lib/index.js","classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_arrow_icon.jsx":[function(require,module,exports){
/**
* List item arrow icon component.
* @class ApListItemArrowIcon
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _ap_list_item_icon = require('./ap_list_item_icon');
var _ap_list_item_icon2 = _interopRequireDefault(_ap_list_item_icon);
var _apemanReactMixinPure = require('apeman-react-mixin-pure');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListItemArrowIcon */
var ApListItemArrowIcon = _react2.default.createClass({
displayName: 'ApListItemArrowIcon',
// --------------------
// Specs
// --------------------
propTypes: {
direction: _react.PropTypes.oneOf(['up', 'down', 'right', 'left'])
},
mixins: [_apemanReactMixinPure.ApPureMixin],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {
direction: 'right'
};
},
render: function render() {
var s = this;
var props = s.props;
var className = (0, _classnames2.default)('ap-list-item-arrow-icon', 'fa fa-angle-' + props.direction, props.className);
return _react2.default.createElement(_ap_list_item_icon2.default, { className: className,
style: Object.assign({}, props.style) });
}
});
exports.default = ApListItemArrowIcon;
},{"./ap_list_item_icon":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_icon.jsx","apeman-react-mixin-pure":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-mixin-pure/lib/index.js","classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_icon.jsx":[function(require,module,exports){
/**
* List item icon component.
* @class ApListItemIcon
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactIcon = require('apeman-react-icon');
var _apemanReactMixinPure = require('apeman-react-mixin-pure');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListItemIcon */
var ApListItemIcon = _react2.default.createClass({
displayName: 'ApListItemIcon',
// --------------------
// Specs
// --------------------
propTypes: {},
mixins: [_apemanReactMixinPure.ApPureMixin],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {};
},
render: function render() {
var s = this;
var props = s.props;
return _react2.default.createElement(_apemanReactIcon.ApIcon, { className: (0, _classnames2.default)('ap-list-item-icon', props.className),
style: Object.assign({}, props.style) });
}
});
exports.default = ApListItemIcon;
},{"apeman-react-icon":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-icon/lib/index.js","apeman-react-mixin-pure":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-mixin-pure/lib/index.js","classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_image.jsx":[function(require,module,exports){
/**
* Image for list item.
* @class ApListItemImage
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactImage = require('apeman-react-image');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListItemImage */
var ApListItemImage = _react2.default.createClass({
displayName: 'ApListItemImage',
// --------------------
// Specs
// --------------------
propTypes: {
src: _react.PropTypes.string,
alt: _react.PropTypes.string,
scale: _react.PropTypes.oneOf(['fit', 'fill', 'none']),
width: _react.PropTypes.number,
height: _react.PropTypes.number
},
mixins: [],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {
src: null,
alt: null,
width: null,
height: null,
scale: 'fill'
};
},
render: function render() {
var s = this;
var props = s.props;
return _react2.default.createElement(
'span',
{ className: (0, _classnames2.default)('ap-list-item-image', props.className) },
_react2.default.createElement(_apemanReactImage.ApImage, { src: props.src,
alt: props.alt,
scale: props.scale,
width: props.width,
height: props.height
})
);
}
});
exports.default = ApListItemImage;
},{"apeman-react-image":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-image/lib/index.js","classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_item_text.jsx":[function(require,module,exports){
/**
* Content of list item.
* @class ApListItemText
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactMixinPure = require('apeman-react-mixin-pure');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListItemText */
var ApListItemText = _react2.default.createClass({
displayName: 'ApListItemText',
mixins: [_apemanReactMixinPure.ApPureMixin],
render: function render() {
var s = this;
var props = s.props;
return _react2.default.createElement(
'div',
{ className: (0, _classnames2.default)('ap-list-item-text', props.className) },
props.children
);
}
});
exports.default = ApListItemText;
},{"apeman-react-mixin-pure":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-mixin-pure/lib/index.js","classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_more_button.jsx":[function(require,module,exports){
/**
* @class ApListMoreButton
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactMixinPure = require('apeman-react-mixin-pure');
var _apemanReactMixinTouch = require('apeman-react-mixin-touch');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ApListMoreButton = _react2.default.createClass({
displayName: 'ApListMoreButton',
// --------------------
// Specs
// --------------------
propTypes: {
text: _react.PropTypes.string,
enabled: _react.PropTypes.bool
},
mixins: [_apemanReactMixinTouch.ApTouchMixin, _apemanReactMixinPure.ApPureMixin],
statics: {},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {
text: 'Load More',
enabled: false
};
},
render: function render() {
var s = this;
var state = s.state;
var props = s.props;
var className = (0, _classnames2.default)('ap-list-more-button', {
'ap-list-more-button-enabled': props.enabled
}, props.className);
return _react2.default.createElement(
'a',
{ className: className,
style: Object.assign({}, props.style) },
props.text,
props.children
);
}
});
exports.default = ApListMoreButton;
},{"apeman-react-mixin-pure":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-mixin-pure/lib/index.js","apeman-react-mixin-touch":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-mixin-touch/lib/index.js","classnames":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/classnames/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/lib/ap_list_style.jsx":[function(require,module,exports){
/**
* Style for ApList.
* @class ApListStyle
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _apemanReactStyle = require('apeman-react-style');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListStyle */
var ApListStyle = _react2.default.createClass({
displayName: 'ApListStyle',
propTypes: {
style: _react.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
style: {},
borderColor: '#EEE',
backgroundColor: _apemanReactStyle.ApStyle.DEFAULT_BACKGROUND_COLOR,
headerColor: _apemanReactStyle.ApStyle.CAPTION_COLOR,
headerBorderColor: _apemanReactStyle.ApStyle.CAPTION_BORDER_COLOR,
rowHeight: _apemanReactStyle.ApStyle.ROW_HEIGHT
};
},
statics: {
styleData: function styleData(config) {
var rowHeight = config.rowHeight;
var borderColor = config.borderColor;
var backgroundColor = config.backgroundColor;
var headerColor = config.headerColor;
var headerBorderColor = config.headerBorderColor;
return {
all: {
'.ap-list': {
display: 'block',
padding: 0,
margin: '8px 0',
listStyle: 'none',
position: 'relative',
minHeight: '48px'
},
'.ap-list-spinner': {
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
right: 0,
zIndex: 4,
backgroundColor: '' + _apemanReactStyle.ApStyle.COVER_BACKGROUND
},
'.ap-list-item': {
display: 'block',
borderBottom: '1px solid ' + borderColor,
minHeight: rowHeight + 'px',
padding: '0 4px'
},
'.ap-list-item-tappable': {
cursor: 'pointer'
},
'.ap-list-item-tappable:hover': {
backgroundColor: 'rgba(200,200,200,0.1)'
},
'.ap-list-item-tappable:active': {
opacity: '0.8'
},
'.ap-list-item-inner': {
display: 'flex',
alignContent: 'center',
justifyContent: 'flex-end'
},
'.ap-list-item-icon': {
padding: '0 4px'
},
'.ap-list-item-text': {
display: 'inline-block',
padding: '0 8px',
width: '100%'
},
'.ap-list-item-aligner': {
display: 'inline-block',
opacity: 0,
width: '1px',
overflow: 'hidden',
whiteSpace: 'pre',
color: 'transparent',
verticalAlign: 'middle'
},
'.ap-list-item-arrow-icon': {
color: '#AAA',
fontSize: '24px'
},
'.ap-list-item-sumbnail-image': {
marginLeft: '-4px'
},
'.ap-list-header': {
display: 'block',
fontSize: '9px',
padding: '2px 12px 1px',
verticalAlign: 'middle',
position: 'relative',
borderTop: '1px solid ' + headerBorderColor,
borderBottom: '1px solid ' + headerBorderColor,
marginBottom: '-1px',
color: '' + headerColor,
fontWeight: '100',
background: 'rgba(0, 0, 0, 0.01)'
},
'.ap-list-body': {
display: 'block',
margin: '0 0 -1px',
overflow: 'hidden'
},
'.ap-list-footer': {
display: 'block',
position: 'relative'
},
'.ap-list-footer-spinner': {
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
right: 0,
zIndex: 4,
backgroundColor: '' + _apemanReactStyle.ApStyle.COVER_BACKGROUND
},
'.ap-list-more-button': {
display: 'none',
textAlign: 'center',
padding: '16px 0',
fontSize: '11px',
color: '#888',
background: 'rgba(0, 0, 0, 0.01)',
borderTop: '1px solid ' + borderColor
},
'.ap-list-more-button:hover': {
cursor: 'pointer',
opacity: '0.9'
},
'.ap-list-more-button:active': {
cursor: 'pointer',
opacity: '0.66'
},
'.ap-list-more-button-enabled': {
display: 'block'
},
'.ap-list-item-title-wrap': {
display: 'inline-flex',
justifyContent: 'center',
flexDirection: 'column'
},
'.ap-list-item-title': {
display: 'block',
lineHeight: 'initial'
},
'.ap-list-item-sub-title': {
display: 'block',
fontSize: '9px',
lineHeight: 'initial',
color: '#AAA'
},
'.ap-list-empty .ap-list-body': {
background: '#F5F5F5'
},
'.ap-list-empty .ap-list-alt': {
display: 'block'
},
'.ap-list-alt': {
display: 'none',
textAlign: 'center',
padding: '32px 8px',
color: '#CCC'
},
'.ap-list-bar': {
display: 'flex',
margin: 0,
padding: '0 8px',
background: 'transparent',
justifyContent: 'space-between'
},
'.ap-list-bar .ap-form': {
margin: 0,
display: 'inline-flex',
alignItems: 'center'
},
'.ap-list-bar-message': {
lineHeight: '36px',
fontSize: 'smaller',
display: 'inline-block',
padding: '0 4px',
color: '#888'
}
}
};
}
},
render: function render() {
var s = this;
var props = s.props;
var _ApListStyle$styleDat = ApListStyle.styleData(props);
var all = _ApListStyle$styleDat.all;
var small = _ApListStyle$styleDat.small;
var medium = _ApListStyle$styleDat.medium;
var large = _ApListStyle$styleDat.large;
return _react2.default.createElement(
_apemanReactStyle.ApStyle,
{ data: Object.assign(all, props.style),
smallMediaData: small,
mediumMediaData: medium,
largeMediaData: large
},
props.children
);
}
});
exports.default = ApListStyle;
},{"apeman-react-style":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-style/lib/index.js","react":"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/react/react.js"}],"/Users/okunishinishi/Projects/apeman-projects/apeman-react-list/node_modules/apeman-react-form/shim/node/ap_form.js":[function(require,module,exports){
/**
* Form component
* @class ApForm
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _apemanReactSpinner = require('apeman-react-spinner');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApForm */
var ApForm = _react2.default.createClass({
displayName: 'ApForm',
// --------------------
// Specs
// --------------------
mixins: [],
statics: {
messageOfError: function messageOfError(error) {
if (!error) {
return null;
}
if (typeof error === 'string') {
return error;
}
return String(error.message || error.msg || error);
},
/**
* Render errors.
* @param {Object} errors - Error messages
* @param {Object} [options] - Optional settings.
* @param {string[]} options.skip - Names to skip.
* @returns {element}
*/
renderErrors: function renderErrors(errors, options) {
if (!errors) {
return null;
}
options = options || {};
var skip = [].concat(options.skip || []);
return _react2.default.createElement(
'span',
{ className: 'ap-form-errors' },
Object.keys(errors || {}).filter(function (name) {
return !~skip.indexOf(name);
}).map(function (name) {
return _react2.default.createElement(
'span',
{ key: name,
className: (0, _classnames2.default)('ap-form-error-message', 'ap-form-error-message-visible', 'ap-form-error-message-' + name) },
ApForm.messageOfError(errors[name])
);
})
);
}
},
propTypes: {
errors: _react.PropTypes.object,
spinning: _react.PropTypes.bool,
spinner: _react.PropTypes.string,
centered: _react.PropTypes.bool,
onEnterKeyPress: _react.PropTypes.func
},
getInitialState: function getInitialState() {
return {};
},
getDefaultProps: function getDefaultProps() {
return {
errors: null,
spinning: false,
spinner: _apemanReactSpinner.ApSpinner.DEFAULT_THEME,
centered: false,
onEnterKeyPress: null
};
},
render: function render() {
var s = this;
var props = s.props;
var className = (0, _classnames2.default)('ap-form', props.className, {
'ap-form-spinning': props.spinning,
'ap-form-centered': props.centered
});
return _react2.default.createElement(
'form',
{ onKeyPress: s.handleKeyPress,
className: className },
s._renderSpinner(),
_react2.default.createElement('input', { type: 'text',
name: 'ap_form_dummy',
disabled: true,
value: undefined,
placeholder: 'This is a dummy input to prevent submit on enter',
className: 'ap-form-dummy-input' }),
props.children
);
},
// --------------------
// Lifecycle
// --------------------
componentDidMount: function componentDidMount() {
var s = this;
var props = s.props;
s.markErrors(props.errors);
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var s = this;
s.unmarkErrors();
s.markErrors(nextProps.errors);
},
// ------------------
// Custom
// ------------------
/**
* Mark error style and messages.
* @param {object} errors - Form errors.
*/
markErrors: function markErrors(errors) {
var s = this;
var elm = _reactDom2.default.findDOMNode(s);
Object.keys(errors || {}).forEach(function (name) {
var inputs = elm.querySelectorAll('[name=\'' + name + '\']');
for (var i = 0; i < inputs.length; i++) {
inputs[i].classList.add('ap-form-errored');
}
var message = elm.querySelector('.ap-form-error-message-' + name);
if (!message) {
message = document.createElement('div');
message.classList.add('ap-form-error-message');
message.classList.add('ap-form-error-message-' + name);
s._insertMessage(message, inputs[0]);
}
message.innerHTML = [].concat(errors[name]).map(function (error) {
return ApForm.messageOfError(error);
}).filter(function (message) {
return !!message;
}).join('<br/>');
if (message.innerHTML.length > 0) {
message.classList.add('ap-form-error-message-visible');
} else {
message.classList.remove('ap-form-error-message-visible');
}
});
},
/**
* Unmark error style and messages.
*/
unmarkErrors: function unmarkErrors() {
var s = this;
var elm = _reactDom2.default.findDOMNode(s);
var errored = elm.querySelectorAll('.ap-form-errored');
for (var i = 0; i < errored.length; i++) {
errored[i].classList.remove('ap-form-errored');
}
var messages = elm.querySelectorAll('.ap-form-error-message');
for (var _i = 0; _i < messages.length; _i++) {
messages[_i].innerHTML = '';
}
},
/**
* Handle key press event.
* @param {object} e - Event
*/
handleKeyPress: function handleKeyPress(e) {
var s = this;
var props = s.props;
var isEnter = e.charCode === 13;
if (isEnter) {
if (props.onEnterKeyPress) {
props.onEnterKeyPress(e);
}
}
if (props.onKeyPress) {
props.onKeyPress(e);
}
},
// -